在 iframe 中显示和下载 pdf

Question

我正在使用 wix，为了自定义任何 html，您需要使用一个嵌入对象，它会在网站上创建一个沙盒化的 iframe。我对它的工作原理和向其发送消息有很好的了解，但我遇到的困难是在此 iframe 中生成 pdf。

我读了一些书，我想我了解了整体概念。虽然传统上您只是将源设置为某处服务器上的某个文档，但我正在根据用户操作动态生成内容。所以它看起来像 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.srciframe.src其中returns一个错误。显示不是绝对必要的，但下载 link 是必要的。有没有其他方法可以获取这些数据？我觉得我错过了一些非常简单的东西。

我不得不更改 [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

Answer 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

Displaying and downloading a pdf in an iframe

html

javascript

pdf

iframe

blob