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

由于提供了二进制字符串的格式化，我无法立即开始工作。我在使用数据URI时通常也使用base64编码数据。如果您能够从编码的后端传递内容，则可以使用..

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

我在使用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 7

基于其他旧答案：

escape()函数现已弃用，

改为使用encodeURI()或encodeURIComponent()。

在我的情况下工作的例子：

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

快乐的编码！

Answer 8

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

您从API或其他来源返回base64字符串。您也可以下载它。

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

Answer 10

一个建议是使用像PDFJS这样的pdf库。

哟必须附加以下"data:application/pdf;base64" +你的pdf字符串，并将你的元素的src设置为。

试试这个例子：

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

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

希望有所帮助:)

Answer 11

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

Answer 12

//对于pdf视图

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

Answer 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>';

谢谢

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

Answer 15

只需在base 64中对格式化的PDF字符串进行编码。然后您应该执行以下操作：

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

将此内容返回给javascript并在新窗口中打开：

window.open(return);

使用javascript在新窗口中打开PDF字符串

15 个答案: