在 bootstrap 模态中显示从 HTML 页面生成的 PDF 而无需下载

Question

有什么方法可以从 HTML page/content 生成 PDF 文件并且 PDF 应该显示在 bootstrap 模式中而不直接下载。

我尝试使用 jsPDF，但无法达到预期效果。而不是 bootstrap 模态，它现在显示在 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"> 中显示它。我还添加了另一个功能，使下载 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。更改：为更高分辨率添加缩放

在 bootstrap 模态中显示从 HTML 页面生成的 PDF 而无需下载

Show PDF generated from HTML page in bootstrap modal without downloading

html

javascript

pdf

jspdf

bootstrap-modal

编辑