在 iframe 中显示和下载 pdf
Posted
技术标签:
【中文标题】在 iframe 中显示和下载 pdf【英文标题】：Displaying and downloading a pdf in an iframe 【发布时间】：2021-06-11 00:32:58 【问题描述】：我正在使用 wix，为了自定义任何 html，您需要使用嵌入对象，该对象在网站上创建沙盒 iframe。我很好地掌握了它的工作原理并向其发布消息，但我遇到的困难是将 pdf 生成到此 iframe 中。
我已经阅读了一些内容，我想我了解了整体概念。虽然传统上您只需将源设置为服务器上某处的某个文档，但我正在根据用户操作动态生成内容。所以它看起来像 pdfkit 并且创建一个 blob 是要走的路。
我认为我能够毫无问题地生成 pdf 以及 blob url 没有问题
[![控制台图像][1]][1]
我可以手动打开控制台并获取该 URL 并将其粘贴到浏览器中，然后文档就会完全按照我的预期打开。但是我无法让它在浏览器中正常显示。
我尝试将各种元素的 src = 设置为 blob url，但没有运气。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
blah
<script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js">
</script>
</head>
<body>
<script>
const doc = new PDFDocument
const stream = doc.pipe(blobStream())
doc.fontSize(25).text('Testing document', 100, 80);
console.log(doc);
doc.end();
stream.on('finish', function()
window.src = stream.toBlobURL('application/pdf');
const a = document.createElement('a');
a.href = stream.toBlobURL('application/pdf');
a.download = 'ShoppingList' || 'download';
console.log("download IS",a)
);
</script>
</body>
</html>
除了设置 window.src 之外，我还尝试了 document.src iframe.src，它返回错误。 显示不是绝对必要的，但下载链接是必要的。有没有其他方法可以做到这一点来获取这些数据？我觉得我错过了一些非常简单的东西。
我不得不更改 [http://pdfkit.org/docs/getting_started.html][2] 上给出的示例，但我认为这不是任何问题，因为包按预期工作并且正在创建文档。
编辑： 我在这方面取得了一些进展，但一直在下载它。我做的是这两件事。
<input type="button" id = "dload" onclick="location.href='';" value="Download Shopping List" />
document.getElementById("dload").onclick = function()location.href = stream.toBlobURL('application/pdf');
pdf 实际上显示在 iframe 中，具有 pdf 预览的全部功能，但是下载根本不起作用，它只是说失败 - 网络错误并且文件类型不是有意义的 pdf。我还可以添加其他什么来使其正常工作吗？
Edit2：又尝试了一件效果不佳的事情，因为弹出窗口大部分都被阻止了
window.open(stream.toBlobURL('application/pdf'), '_blank');
虽然它在技术上有效，但确实很混乱，并导致了许多问题。它在移动和桌面上的工作方式也不同。必须有一些简单的方法来显示pdf，但我搜索的越多似乎只会导致更多的问题。 [1]：https://i.stack.imgur.com/le6o9.png [2]：http://pdfkit.org/docs/getting_started.html
【问题讨论】：
【参考方案1】：我已经部分解决了我的问题，这已经足够满足我的需要了。这就是我所做的。
<html>
<head>
<script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
<script type="text/javascript">
window.onmessage = (event) =>
if (event.data)
// create a document and pipe to a blob
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
doc.font('Helvetica');
doc.fontSize(20);
doc.text('Some Text',200,20);
// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function()
const blob = stream.toBlob('application/pdf')
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = "YourFileName";
a.style.position = 'fixed';
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
);
;
;
</script>
</head>
<body>
</body>
</html>
虽然我无法使用这种方法看到 pdf，但它确实可以正确下载，这是更重要的部分。从技术上讲，我可以将两者结合起来，但由于 iframe 上的下载按钮不起作用，我认为对于拥有单独按钮来实际下载它的人来说，这会让人感到困惑。所以我在框架外有一个单独的按钮来触发“onmessage”它是wix的一个功能。这会触发所有文档的生成和下载。
【讨论】：
以上是关于在 iframe 中显示和下载 pdf的主要内容，如果未能解决你的问题，请参考以下文章
如何下载在 AngularJS 中开发的呈现 iframe 的网页作为 PDF 文件？
如何自动停止在 iframe 中下载 PDF 而是查看文件？
如何在调用 servlet 后使用 ajax 在 iframe 中显示 PDF