在 iframe 中显示和下载 pdf答案

【问题标题】：Displaying and downloading a pdf in an iframe在 iframe 中显示和下载 pdf
【发布时间】：2023-03-26 20:51:01
【问题描述】：

我正在使用 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

【问题讨论】：

标签： javascript html pdf iframe blob

【解决方案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的一个功能。这会触发所有文档的生成和下载。

【讨论】：