logo标签列表

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

javascriptpdf
89

我有一个格式化的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文件。
非常感谢您的帮助。
1
你是如何“编写”这个字符串的？你的意思是它是由后端返回的吗（如果是，那么是哪个平台）？如果PDF数据是由后端生成的，请确保设置正确的Content-Type头。 - Ates Goral
最佳答案：在这种情况下，您不应该使用AJAX。 - Josh Stodola
1
它正在后端创建，但在服务器上保存不可能/优雅。此外，在生成pdf之前已经将内容写入页面...因此设置pdf标题将无法起作用。 - DaveC
2
@Josh Stodola 在这种情况下为什么不应该使用 AJAX。 - user1451111
@DaveC，您找到解决方法了吗？ - Zeeshan Chaudhary
显示剩余3条评论
17个回答
0

//用于PDF查看

let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64," + data.data +"'></iframe>");
0
我知道回答已经晚了，但我刚刚卡在“单击pdf文件名在新页面中打开pdf”的问题上，这对我有用：
Js-
fileName = '';
    fileUrl = '';

    handleFileUpload(event) {
        const file = event.target.files[0];
        this.fileName = file.name;
        this.fileUrl = URL.createObjectURL(file);
    }

HTML-

<div class="slds-form-element">
        <lightning-input
            type="file"
            label="Upload PDF File"
            onchange={handleFileUpload}>
        </lightning-input>
    </div>
    <div class="slds-form-element">
        <a href={fileUrl}  target="_blank">{fileName}</a>
    </div>
0
在我的情况下，我从后端接收到一个PDF字符串，我必须在Axios中设置responseType。
{
    responseType: 'blob',
}

然后像这样，您可以在新标签页中打开PDF文件

const file = new Blob([file], { type: 'application/pdf' });
const url = URL.createObjectURL(file);
window.open(url, '_blank');
-1
一个建议是使用像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>

希望能有所帮助 :)
救命稻草，我的客户不喜欢自动下载PDF文件到电脑，他们只想从浏览器中打印。 - Sean T
-2

只需将格式化的PDF字符串以base64编码。然后您应该执行以下操作：

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

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

window.open(return);
-2
使用函数"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;
};
-2
对于最新的 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>';

谢谢

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接