从javascript触发base64编码PDF的打印预览

Question

我已经看了一下stackoverflow试图找到一种方法现在这样做,并找不到合适的答案.我需要能够通过base64编码的字符串在新窗口或iframe中加载PDF,并在加载后立即触发它的打印预览.我可以使用这两种方法轻松加载PDF,但实际上无法正确显示打印预览.这是我尝试过的:

1. embed在新窗口中使用元素.window.print()即使在加载内容后,呼叫仍为空白.
2. 使用隐藏的,动态创建iframe与src="data:application/pdf;base64,JVBERi0..."和调用myFrame.contentWindow.print().但这会产生CORS错误.我不知道为什么,因为我没有通过iframe加载新域名,只是内容.
3. 打开一个新窗口,只显示iframe#2中的元素,并在整个窗口中调用print.这也显示一个空白页面.
4. 使用数据uri打开一个新窗口并打印它. window.open('data:application/pdf;base64,JVBERi0...').print();.这也不起作用,因为它甚至根本不显示打印预览.我也试过延迟它,setTimeout但也没有做任何事情.

在这一点上,我很困惑为什么这些都不起作用,特别是因为在Chrome中它显示如下的自定义菜单栏:

如果我点击那里的实际打印图标,打印预览是完美的.当我点击该按钮时,Chrome正在做什么,这正是我想要完成的.反正有没有触发这个功能？还是有另一种方法来实现我想要的东西？只是为了澄清,我只需要在Chrome中使用它,我不需要担心其他浏览器.

Answer 1

这是第3点的解决方案

打开一个只有iframe元素的新窗口,如#2中的iframe元素,并在整个窗口中调用print.这也显示一个空白页面.

在你的情况下,它抛出CORS错误,因为看起来像iframe src你给base64String而不是url.这是你可以做的

1. 拿你的base64String,将它转换为Blob
2. 从Blob生成Url
3. 将生成的Url提供给iframe.
4. 在此之后,您可以使用iframe.contentWindow.print();打印内容.

这是将base64转换为Blob的代码

'use strict';

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
        const byteCharacters = atob(b64Data);

const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize),
            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});
    return blob;
}


const contentType = "application/pdf",
            b64Data = "YourBase64PdfString",//Replace this with your base64String
            blob = this.b64toBlob(b64Data, contentType),
            blobUrl = URL.createObjectURL(blob);

使用blboUrl到iframe的src,一旦完成,你可以在iframe上调用print,如下所示

const iframeEle = document.getElementById("Iframe");
        if (iframeEle) {
            iframeEle.contentWindow.print();
        }

希望这可以帮助...

有关base64到Blob的更多详细信息,请参阅JavaScript中的base64字符串创建Blob

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