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

Question

有什么方法可以从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>

Answer 1

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

这个模态代码来自（为了简单起见） 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。 更改：为更高分辨率添加了缩放

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-30 12:01:19

编辑

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-30 12:01:19

编辑

解决方案1
1 已采纳 2020-06-30 12:01:19