Рендеринг файлов в браузере - PullRequest
Новая
       1

Рендеринг файлов в браузере

0 голосов
/ 06 мая 2019

Я отправляю запрос в службу отдыха, чтобы получить контент. Контент может быть любого из типов. (pdf, doc, pptx, docx, img, png, mp3 и т. д.)

У меня есть очень простой HTML и Javascript для загрузки содержимого.

HTML 

<html>
<head>
<script type="text/javascript" src="test.js"></script>
click
</head>
<body>
<button type="submit" target='_blank' onclick="Test()">Test</button>
</body>
</html>

JavaScript 

function Test() {
    console.log("started");
    var xhttp = new XMLHttpRequest();
    xhttp.responseType = "arraybuffer";
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
               console.log(this.response);
               var bytes = new Uint8Array(this.response); // pass byte response to this constructor

var blob=new Blob([bytes], { type: "*/*"});// change resultByte to bytes

var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.click();
         }
    };
    xhttp.open("POST", "http://localhost:8080/testService", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("Accept", "*/*");
    xhttp.send("{ \"Id\": \"12345678\" }");
}

Теперь для линии 

var blob=new Blob([bytes], { type: "*/*"});

Как я узнаю, какой это тип файла ... он не позволит мне транслировать его в браузер, если я просто оставлю его как */*, это должен быть определенный тип.

1 Ответ

1 голос
/ 06 мая 2019

Как вы указали в комментариях, вам нужно получить заголовок типа контента, вы настроили ответ. Вот простой ответ, который показывает, как получить заголовок типа контента. 

xhr = new XMLHttpRequest();

xhr.addEventListener('load', requestHandler);
xhr.open('GET', your_service_url_here);
xhr.send();

function requestHandler()
{
    console.log(this.getResponseHeader('content-type'));
}

Подробнее о методе XMLHttpRequest.getResponseHeader() вы можете прочитать здесь .

Для потоковой передачи вы можете использовать так называемые URI данных. 

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Запись caniuse.com для URI данных утверждает, что поддержка URI данных широко распространена. Для принудительной автоматической загрузки потока вы можете выполнить событие click для динамически генерируемой ссылки URI данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...