Открытие PDF-строки в новом окне с помощью JavaScript

Question

У меня есть отформатированная строка PDF, которая выглядит как

%PDF-1.73 0 obj<<< /Type /Group /S /Transparency /CS /DeviceRGB >> /Resources 2 0 R/Contents 4 0 R>> endobj4 0 obj<> streamx��R=o�0��+��=|vL�R���l�-��ځ,���Ge�JK����{���Y5�����Z˯k�vf�a��`G֢ۢ��Asf�z�ͼ��`%��aI#�!;�t���GD?!���<�����B�b��

...

00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer << /Size 11 /Root 10 0 R /Info 9 0 R >>startxref2015%%EOF

Я пытаюсь открыть эту строку в новом окне в виде файла PDF. Всякий раз, когда я использую window.open () и записываю строку в новую вкладку, он думает, что текст должен быть содержимым документа HTML. Я хочу, чтобы он признал, что это PDF-файл.

Любая помощь очень ценится

Answer 1

Только для информации, ниже

window.open("data:application/pdf," + encodeURI(pdfString)); 

больше не работает в Chrome.Вчера я столкнулся с той же проблемой и попробовал это решение, но оно не сработало (это «Не разрешено перемещать верхний фрейм к URL данных»).Вы не можете открыть URL-адрес данных непосредственно в новом окне.Но вы можете обернуть его в iframe и открыть в новом окне, как показано ниже.=)

let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(yourDocumentBase64VarHere)+"'></iframe>")

Answer 2

window.open("data:application/pdf," + escape(pdfString)); 

Выше, вставив закодированный контент в URL. Это приводит к ограничению длины содержимого в URL и, следовательно, к невозможности загрузки файла PDF (из-за неполного содержимого).

Answer 3

Возможно, вы захотите исследовать, используя URI данных. Это будет выглядеть примерно так.

window.open("data:application/pdf," + escape(pdfString));

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

window.open("data:application/pdf;base64, " + base64EncodedPDF);

Надеюсь, это правильное направление для того, что вам нужно. Также обратите внимание, что это не будет работать вообще в IE6 / 7, поскольку они не поддерживают URI данных.

Answer 4

Этот работал для меня.

window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64);

Этот тоже работал

 let a = document.createElement("a");
 a.href = "data:application/octet-stream;base64,"+data64;
 a.download = "documentName.pdf"
 a.click();

Answer 5

Я понимаю, что это довольно старый вопрос, но у меня было то же самое сегодня, и я нашел следующее решение:

doSomethingToRequestData().then(function(downloadedFile) {
  // create a download anchor tag
  var downloadLink      = document.createElement('a');
  downloadLink.target   = '_blank';
  downloadLink.download = 'name_to_give_saved_file.pdf';

  // convert downloaded data to a Blob
  var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });

  // create an object URL from the Blob
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(blob);

  // set object URL as the anchor's href
  downloadLink.href = downloadUrl;

  // append the anchor to document body
  document.body.appendChild(downloadLink);

  // fire a click event on the anchor
  downloadLink.click();

  // cleanup: remove element and revoke object URL
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
});

Answer 6

На основании других старых ответов:

escape() функция устарела,

Вместо этого используйте encodeURI () или encodeURIComponent () .

Пример, который работал в моей ситуации:

window.open("data:application/pdf," + encodeURI(pdfString)); 

Счастливого кодирования!

Answer 7

У меня была эта проблема при работе с запросом на отправку FedEx. Я выполняю запрос с AJAX. Ответ содержит номер отслеживания, стоимость, а также строку в формате PDF, содержащую этикетку доставки.

Вот что я сделал:

Добавить форму:

<form id='getlabel' name='getlabel' action='getlabel.php' method='post' target='_blank'>
<input type='hidden' id='pdf' name='pdf'>
</form>

Используйте javascript, чтобы заполнить значение скрытого поля строкой pdf и опубликовать форму.

Где getlabel.php:

<?
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($_POST["pdf"]));
header('Content-Disposition: inline;');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
print $_POST["pdf"];
?>

Answer 8

Я просто хочу добавить ответ @Noby Fujioka, Edge не будет поддерживать следующее

window.open("data:application/pdf," + encodeURI(pdfString));

Для Edge нам нужно преобразовать его в blob, и это примерно так:

//If Browser is Edge
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                var byteCharacters = atob(<Your_base64_Report Data>);
                var byteNumbers = new Array(byteCharacters.length);
                for (var i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                var byteArray = new Uint8Array(byteNumbers);
                var blob = new Blob([byteArray], {
                    type: 'application/pdf'
                });
                window.navigator.msSaveOrOpenBlob(blob, "myreport.pdf");
            } else {
                var pdfWindow = window.open("", '_blank');
                pdfWindow.document.write("<iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " + encodeURI(<Your_base64_Report Data>) + "'></iframe>");
            }

Answer 9

var byteCharacters = atob(response.data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);

Вы возвращаете строку base64 из API или другого источника. Вы также можете скачать его.

Answer 10

Обновленная версия ответа от @ Noby Fujioka :

function showPdfInNewTab(base64Data, fileName) {  
  let pdfWindow = window.open("");
  pdfWindow.document.write("<html<head><title>"+fileName+"</title><style>body{margin: 0px;}iframe{border-width: 0px;}</style></head>");
  pdfWindow.document.write("<body><embed width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(data)+"#toolbar=0&navpanes=0&scrollbar=0'></embed></body></html>");
}