Question

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

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

1 个答案: