如何使用html2canvas和jspdf以正确而简单的方式导出为pdf

how to use html2canvas and jspdf to export to pdf in a proper and simple way

本文关键字：简单 方式导 pdf html2canvas 何使用 jspdf      更新时间：2023-09-26

我目前正在开发一个学校管理软件，该软件通常需要导出包含data tables和div tag的html内容。

我已经尝试了所有可能的方法来编写一个代码，该代码将能够以良好的方式导出我的html数据，最好使用css。在这里检查了一些问题和答案后，我尝试使用spdf，但没有成功。

它不断破坏我的表对齐，然后我读到了html2canvas，但用jspdf实现它是我的问题，如果用html2canvas的div标记，然后将画布发送到jspdf，以将画布导出为pdf，我想捕获内容。

下面是我的代码：

<script src="assets/js/pdfconvert/jspdf.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js">  </script>
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script>
<script src="assets/js/pdfconvert/filesaver.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script>
<script src="assets/js/pdfconvert/html2canvas.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script>

这是js代码

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});

我为您制作了一个jsfiddle。

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>

'

        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

jsfiddle：http://jsfiddle.net/rpaul/p4s5k59s/5/

在Chrome38、IE11和Firefox 33中进行了测试。Safari似乎有问题。然而，Andrew通过从PNG切换到JPEG，在Mac OSx上的Safari 8中实现了这一功能。有关详细信息，请参阅下面的评论。

这个演示了如何使用dpi/resolution调整在页面上只打印选定的元素

HTML:

<html>
  <body>
    <header>This is the header</header>
    <div id="content">
      This is the element you only want to capture
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>
  </body>
</html>

CSS：

body {
  background: beige;
}
header {
  background: red;
}
footer {
  background: blue;
}
#content {
  background: yellow;
  width: 70%;
  height: 100px;
  margin: 50px auto;
  border: 1px solid orange;
  padding: 20px;
}

JS:

$('#print').click(function() {
  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {
    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.save('sample-file.pdf');
    }
  });
});

jsfiddle：https://jsfiddle.net/marksalvania/dum8bfco/

更改此行：

var doc = new jsPDF('L', 'px', [w, h]);
var doc = new jsPDF('L', 'pt', [w, h]);

固定尺寸。

当您添加"useCORS:true"；。抓取谷歌地图，将其呈现在屏幕上，并将其放入pdf 中

function create_pdf() {
         return html2canvas($('#map'), {
             useCORS: true,
             background: "#ffffff",
             onrendered: function(canvas) {
                 var myImage = canvas.toDataURL("image/jpeg,1.0");
                 // Adjust width and height
                 var imgWidth =  (canvas.width * 60) / 240;
                 var imgHeight = (canvas.height * 70) / 240;
                 // jspdf changes
                 var pdf = new jsPDF('p', 'mm', 'a4');
                 pdf.addImage(myImage, 'png', 15, 2, imgWidth, imgHeight); // 2: 19
                 pdf.save(`Budgeting ${$('.pdf-title').text()}.pdf`);
             }
         });
相关文章：