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

Question

我目前正在开发一个学校管理软件，通常需要导出包含数据表和div标签的html内容。

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

它一直在破坏我的表格对齐方式，然后我阅读了有关 html2canvas 的内容，但是用 jspdf 实现它是我的问题，如果 div 标签，我想捕获内容使用 html2canvas 然后将 Canvas 发送到 jspdf 以将 Canvas 导出为 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');
            }
        });

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

已在 Chrome38、IE11 和 Firefox 33 中测试。Safari 似乎有问题。然而，Andrew 通过从 PNG 切换到 JPEG 使其在 Mac OSx 上的 Safari 8 中工作。有关详细信息，请参阅下面他的评论。