以引导方式显示从HTML页面生成的PDF，无需下载 | 以引导方式显示从HTML页面生成的PDF

本文介绍了以引导方式显示从HTML页面生成的PDF，无需下载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有什么方法可以从HTML页面/内容生成PDF文件，并且PDF应该以引导方式显示，而无需直接下载.

Is there any way to generate a PDF file from HTML page/content and the PDF should be shown in bootstrap modal without downloading directly.

我尝试使用jsPDF，但无法按预期进行.现在，它不再显示自举模式，而是在iframe中显示.

I tried using jsPDF, but couldn't do as expected. Instead of bootstrap modal its showing in an iframe now.

下面是示例HTML内容，该内容将转换为PDF(无需下载)以显示在Bootstrap Modal中.

Below is the sample HTML content which is to be converted in to PDF(without downloading) to show in Bootstrap Modal.

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

下面是JavaScript代码(jsPDF).

Below is the javascript code(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>

推荐答案

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

I reckon I have found a solution to your problem. Basically it takes a screenshot of your page with html2canvas then it adds that image to to new jsPDF('p', 'pt', 'letter');. Then it creates a bloburl from the canvas to display it in an html <object data="bloburl"> in your modal. I have also added another function that makes it possible to download the pdf as well.

相关的javascript:

The relevant 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>中:

This code would have to be included in you <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>

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

Hope this helps! If not please comment

现在整个页面都适合pdf.更改:增加了缩放比例以获得更高的分辨率

Now the entire page fits on the pdf.Changes: Added scaling for higher resolution

这篇关于以引导方式显示从HTML页面生成的PDF，无需下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！