Как мне записать "сырые" байты в браузер в JavaScript?

Question

Я пытаюсь предоставить пользователю PDF-файл, но у меня есть строка, содержащая байты в PDF-файле. Я хочу записать эти байты в браузер, чтобы пользователь мог загрузить файл PDF. Однако когда я делаю это:

document.open('application/pdf');
document.write(myBytes);

, я просто получаю байты, отображаемые как текст, то есть они находятся на странице HTML (см. Скриншоты). Я хочу, чтобы отображались только указанные байты, без каких-либо HTML, окружающих их. Как это сделать?

Answer 1

Вы можете принудительно загрузить файл с помощью трюка с атрибутами anchor && download или использовать iframe

Вот пример ниже

Фрагмент не работает из-за изолированной среды.

const pdfView = document.querySelector("#pdfView");

fetch("https://cors-anywhere.herokuapp.com/https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
  .then(response => response.blob())
  .then(blob => blob.arrayBuffer())
  .then(myBytes => {
    const totalBlob = new Blob([myBytes], { type: 'application/pdf' });
    const url = window.URL.createObjectURL(totalBlob);
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.download = `document.pdf`;
    anchor.click();
    anchor.textContent = 'Download'
    document.body.appendChild(anchor);

    pdfView.src = url;  
  })

<iframe id="pdfView" src="" type="application/pdf" width="100%" height="100%" style="overflow: auto;">
    </iframe>