如何使用html2canvas和jspdf以适当且简单的方式导出为pdf

Question

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

我已经尝试了所有可能的方法来编写代码，从而能够以一种很好的方式（最好是使用CSS）导出html数据。在这里检查了一些问题和答案之后，我尝试使用spdf，但是没有运气。

它一直在破坏我的表对齐方式，然后我读了一下，html2canvas但是要实现它jspdf是我的问题，如果要使用div标签，则要捕获内容，html2canvas然后发送画布以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');
});

Answer 1

我为您制作了一个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');
            }
        });

在Chrome38，IE11和Firefox 33中进行了测试。似乎Safari有问题。但是，安德鲁通过从PNG切换到JPEG，使其在Mac
OSx的Safari 8中可以工作。有关详细信息，请参见下面的评论。