从 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 中的元素，并在整个窗口上调用打印。这也显示了一个空白的白页。
4. 使用数据 uri 打开一个新窗口并打印它。 window.open('data:application/pdf;base64,JVBERi0...').print();。这也不起作用，因为它甚至根本不显示打印预览。我也尝试过使用setTimeout 延迟它，但这也无济于事。

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

如果我点击那里的实际打印图标，打印预览是完美的。当我单击该按钮时，无论 Chrome 正在做什么，这正是我想要完成的。反正有触发该功能吗？还是有另一种方法来完成我想要的？澄清一下，我只需要它在 Chrome 中工作，我不需要担心其他浏览器。

Answer 1

这是第 3 点的解决方案：

打开一个新窗口，其中只有一个 iframe 元素，如 #2 中的那个，并在整个窗口上调用打印。这也显示了一个空白的白页。

在您的情况下，它会引发 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);

使用blobUrl到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;
};