在所有浏览器中查看和打印 Base64 PDF答案

【问题标题】：Viewing and Printing Base64 PDF's across all browsers在所有浏览器中查看和打印 Base64 PDF
【发布时间】：2019-07-17 09:16:33
【问题描述】：

在我开始之前，我只想说我知道以前有人问过这个问题，而且我已经在这个论坛上搜索了几个小时，但没有一个答案一直对我有用。

我正在为 Web 应用构建一个页面，该页面将从数据库中提取 Base64 编码的 PDF。这将需要在 PDF 查看器的屏幕上显示，并且需要可打印。

我已经尝试了 3 件事。

1. JavaScript PDF 查看器的 Kendo UI。

此解决方案提供跨所有浏览器查看 PDF 的功能，但没有内置打印解决方案。我尝试使用 Stackoverflow 中的一些代码，但这似乎只适用于 Firefox。

我从here 获得了代码。在 Firefox 上，它会打开一个包含 PDF 的新窗口，然后是这个 PDF 的打印窗口，这是我所期望的。然而，在 Chrome 上，它可以很好地打开 PDF 窗口，但是在打印时，打印预览会显示一个空白页，顶部有日期。

2。 HTML 对象

这给了我我需要的一切，但是它在 IE 和 Edge 上不起作用。在 Chrome 和 FF 上，它可以完美地显示 PDF，无论哪种浏览器都有内置的 PDF 查看器，顶部有一个打印按钮。

在 IE 和 Edge 上，它显示一个空白框。

请注意 selectedPDFData 是一个包含 Base64 编码 PDF 的字符串。

代码：

        var objbuilder = '';
        objbuilder += ('<object width="100%" height="750" data = "data: application / pdf; base64, ');
        objbuilder += (selectedPDFData);
        objbuilder += ('" type="application/pdf" class="internal">');
        objbuilder += ('<embed src="data:application/pdf;base64,');
        objbuilder += (selectedPDFData);
        objbuilder += ('" type="application/pdf"  />');
        objbuilder += ('</object>');

然后将其插入到 div 中。

3. IFrame

这提供了与以前的解决方案相同的功能，尽管存在相同的问题。

        var testiFrame = '';
        testiFrame += '<iframe src="data:application/pdf;base64,';
        testiFrame += (selectedPDFData)
        testiFrame += '" width="100%" height="750"><iframe>';

这也被插入到一个 Div 中。

在尝试了所有这些选项后，我完全不知所措，而且我似乎找不到任何其他解决方案。

【问题讨论】：

标签： javascript html pdf kendo-ui

【解决方案1】：

您可以使用Print JS 打印base64 PDFs

<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
</button>

【讨论】：