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

Ответ 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>")

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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 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);
});

Ответ 5

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

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();

Ответ 6

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 или другого источника. Вы также можете скачать его.

Ответ 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"];
?>

Ответ 8

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

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

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

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

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

Удачного кодирования!

Ответ 9

Я просто хочу добавить ответ @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>");
            }

Ответ 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>");
}

Ответ 11

Одно из предложений заключается в использовании библиотеки PDF, такой как PDFJS.

Мне нужно добавить следующий "data:application/pdf;base64" + ваш pdf String и установить для этого src вашего элемента.

Попробуйте в этом примере:

var pdfsrc = "data:application/pdf;base64" + "67987yiujkhkyktgiyuyhjhgkhgyi...n"

<pdf-element id="pdfOpen" elevation="5" downloadable src="pdfsrc" ></pdf-element>

Надеюсь, что это поможет:)

Ответ 12

//для просмотра в формате PDF

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

Ответ 13

для последней версии Chrome это работает для меня:

var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = 'iframe width="100%" height="100%" src="data:application/pdf;base64,"+base64+"></iframe>';

Спасибо

Ответ 14

используйте функцию "printPreview (binaryPDFData)", чтобы получить диалоговое окно предварительного просмотра двоичных данных PDF.

printPreview = (data, type = 'application/pdf') => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const theWindow = window.open(blobURL);
    const theDoc = theWindow.document;
    const theScript = document.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = 'window.onload = ${injectThis.toString()};';
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    const blob = new Blob(byteArrays, {
        type: contentType
    }); // statement which creates the blob
    return blob;
};

Ответ 15

Просто закодируйте свою отформатированную строку PDF в базе 64. Тогда вы должны сделать

$pdf = 'data:application/pdf;base64,'.$base64EncodedString;

верните это в javascript и откройте в новом окне:

window.open(return);