在引导模式中显示从 HTML 页面生成的 PDF，无需下载答案

【问题标题】：Show PDF generated from HTML page in bootstrap modal without downloading在引导模式中显示从 HTML 页面生成的 PDF，无需下载
【发布时间】：2020-10-19 20:24:12
【问题描述】：

有没有办法从HTML 页面/内容生成PDF 文件，PDF 应该在引导模式中显示而不直接下载。

我尝试使用jsPDF，但无法达到预期效果。它现在显示在 iframe 中，而不是引导模式。

以下是示例HTML 内容，将转换为PDF（无需下载）以显示在 Bootstrap 模式中。

<body>
  <Content will be displayed here>
</body>

下面是javascript代码（jsPDF）。

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='../../dist/jspdf.debug.js'></script>
<script>

    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.html(document.body, {
        callback: function (pdf) {
            var iframe = document.createElement('iframe');
            iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
            document.body.appendChild(iframe);
            iframe.src = pdf.output('datauristring');
        }
    });
</script>

【问题讨论】：

是否只想制作表格的“屏幕截图”？还是整个身体 --> document.body？您是否想使用jsPDF 或html2canvas，因为您已将它们都包含在文档中...此外，您是否知道您在此处创建<div> 而不是<iframe>：@ 987654335@?
@Chiel，我想要整个身体。实际上它是 iframe，我尝试使用 div 但没有工作并且忘记将其恢复。现在我对问题进行了编辑。实际上我不知道使用哪一个是 html2canvas 还是 jsPDF。这是我在搜索时得到的，似乎我更接近目标，因为我只需要用 html div 替换 iframe，最准确地说是引导模式。谢谢。
这能回答你的问题吗？ PDF file to be displayed on the dialog modal via bootstrap

标签： javascript html pdf bootstrap-modal jspdf

【解决方案1】：

我想我已经找到了解决您问题的方法。基本上，它使用html2canvas 截取您的页面，然后将该图像添加到new jsPDF('p', 'pt', 'letter');。然后它从画布创建一个bloburl 以在您的模态中以html <object data="bloburl"> 显示它。我还添加了另一个可以下载 pdf 的功能。

相关的javascript：

//This will be the pdf object
let pdfFinal = null

function downloadPDF() {
   pdfFinal.save("file.pdf");
}

function showPDF() {
   //Create screenshot of body
   html2canvas(document.body, {scale: 2,scrollY: -window.scrollY}).then(canvas => {
      document.body.appendChild(canvas);
      var imgData = canvas.toDataURL('image/png');

      //add the image to pdf
      var pdf = new jsPDF('L', 'pt', [canvas.width, canvas.height]);
      pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);

      //set the pdfFinal to be later downloaded
      pdfFinal = pdf;
      //Get and set the output of the pdf
      let output = pdf.output('bloburl');
      document.getElementById("pdfObj").height = canvas.height / 4;
      document.getElementById("pdfObj").data = output;
   });
}

此代码必须包含在您<head>：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

此模态代码来自(for simplicities sake) w3schools:

<div class="container">
  <button type="button" onclick="showPDF();" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Here is your pdf.</p>
        </div>
        <center><object id="pdfObj" data="" type="application/pdf" width="90%" height="550">

          </object></center>
        <div class="modal-footer">
          <button type="button" class="btn btn-info" onclick="downloadPDF();">Download</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>

希望这会有所帮助！如果没有请评论

编辑

现在整个页面都适合 pdf。更改：为更高分辨率添加了缩放

【讨论】：

嗨@Chiel，非常感谢，它的工作。仍然存在一些小问题，即显示和下载的 pdf 不适合 pdf 页面容器（它在右侧中断）。是否有任何解决方案可以使内容适合容器主体？现在整个页面内容都附加在pdf中。无论如何将其限制为来自特定 div 而不是整个页面的内容？
@aneesmakader 而不是 document.body （整个页面），您也可以传递 document.getElementById(“myDiv”) 例如。对于另一个问题，我必须自己测试一下
@aneesmakader 我不确定你所说的“它在右侧断裂”是什么意思。也许它与缩放有关。也许在document.body 这个, {scale: 1} 之后放置会有所帮助，这样该行看起来像：html2canvas(document.body, {scale: 1}).then(canvas => {
它中断意味着，在一定宽度之后，html 内容的剩余部分会从右侧修剪。此外，底部也发生了同样的情况（似乎只生成了一页）。我希望它澄清）：-
@aneesmakader 希望这次编辑现在可以解决您的问题！