从javascript触发base64编码PDF的打印预览 [英] Trigger print preview of base64 encoded PDF from javascript

问题描述

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

I've looked around stackoverflow trying to find a way to do this for a while now, and can't find a suitable answer. I need to be able to load a PDF in either a new window or an iframe via a base64 encoded string and trigger a print preview of it immediately after loading it. I can easily load the PDF using both of those methods, but can't actually get it to show the print preview properly. Here is what I've tried:

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（数据：应用/ PDF; BASE64，JVBERi0 ...）打印（）; 。这也不起作用，因为它甚至根本不显示打印预览。我也尝试用 setTimeout 推迟它，但这也没有做任何事情。

1. Using embed element in a new window. Calling window.print() is blank, even after the content is loaded.
2. Using a hidden, dynamically created iframe with src="data:application/pdf;base64,JVBERi0..." and calling myFrame.contentWindow.print(). But this gives a CORS error. I'm not sure why, because I'm not loading a new domain through the iframe, just content.
3. Open a new window with only an iframe element like the one in #2 and calling a print on the whole window. This also shows a blank white page.
4. Open a new window with the data uri and print it. window.open('data:application/pdf;base64,JVBERi0...').print();. This doesn't work either, as it doesn't even show a print preview at all. I've also tried delaying it with a setTimeout but that doesn't do anything either.

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

At this point I'm very confused as to why none of these work, especially because in Chrome it display's custom menu bars like this:

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

And if I click the actual print icon there, the print preview is perfect. Whatever Chrome is doing when I click that button is exactly what I want to accomplish. Is there anyway to trigger that functionality? Or is there another way to accomplish what I want? And just to clarify, I only need this to work in Chrome, I don't need to worry about other browsers.

推荐答案

这是第3点的解决方案

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

Open a new window with only an iframe element like the one in #2 and calling a print on the whole window. This also shows a blank white page.

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

In your case it's throwing CORS error because looks like for iframe src you are giving the base64String not the url. Here is what you can do

1. 拿你的base64String，把它转换为Blob


2. 生成一个来自Blob的网址


3. 将生成的网址提供给iframe。


4. 之后，您可以使用iframe.contentWindow.print（）; <打印内容/ li>
   

1. Take your base64String, convert it to a Blob
2. Generate a Url from the Blob
3. Provide the generated Url to iframe.
4. After this you can print the content using iframe.contentWindow.print();

以下是将base64转换为Blob的代码

Here is the code to convert base64 to 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，如下所示

Use blboUrl to the src of Iframe, once it's done, you can call print on iframe as shown below

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

希望这会有所帮助......

Hope this helps...

有关base64到Blob的更多详细信息，请访问创建来自JavaScript中的base64字符串的Blob

More details on base64 to Blob is here Creating a Blob from a base64 string in JavaScript

这篇关于从javascript触发base64编码PDF的打印预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！