Question

我已经查看了stackoverflow，试图找到一种方法暂时执行此操作，但无法找到合适的答案。我需要能够通过base64编码的字符串在新窗口或iframe中加载PDF，并在加载后立即触发它的打印预览。我可以使用这两种方法轻松加载PDF，但实际上无法正确显示打印预览。这是我尝试过的：

在新窗口中使用embed元素。即使在加载内容后，调用window.print()也是空白的。
使用隐藏的，动态创建的iframe src="data:application/pdf;base64,JVBERi0..."并调用myFrame.contentWindow.print()。但这会产生CORS错误。我不确定原因，因为我没有通过iframe加载新域名，只是内容。
打开一个新窗口，其中只有一个iframe元素，如＃2中的元素，并在整个窗口中调用print。这也显示一个空白页面。
使用数据uri打开一个新窗口并打印出来。 window.open('data:application/pdf;base64,JVBERi0...').print();。这也不起作用，因为它甚至根本不显示打印预览。我也尝试用setTimeout来推迟它，但这也没有做任何事情。

此时我很困惑为什么这些都不起作用，特别是因为在Chrome中它会显示如下自定义菜单栏：

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

Answer 1

这是第3点

的解决方案

打开一个新窗口，其中只包含＃2中的iframe元素，并在整个窗口中调用print。这也显示一个空白页面。

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

获取base64String，将其转换为Blob
从Blob生成网址
将生成的Url提供给iframe。
之后，您可以使用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的更多详细信息，请访问Creating a Blob from a base64 string in JavaScript

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

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

2 个答案: