如何使用html2canvas和jspdf以正确和简单的方式导出到pdf [英] how to use html2canvas and jspdf to export to pdf in a proper and simple way

问题描述

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

I am currently working on a school management software that usually requires exporting of html contents that contains data tables and div tag.

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

I have tried all possible means to write a code that will be able to export my html data in a good way, with css preferably. After checking some question and answers here, I tried using spdf, but no luck.

它保持破坏我的表对齐，然后我阅读关于 html2canvas ，但实现它与 jspdf 是我的问题，我想捕获的内容，如果一个div标签与 html2canvas 然后发送画布到 jspdf 将画布导出为pdf。

It keeps destroying my table alignment, then I read about html2canvas but to implement it with jspdf was my problem, i would like to capture the content if a div tag with html2canvas then send the canvas to jspdf to export the canvas as 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。

I have made a jsfiddle for you.

 <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/

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

在Chrome38，IE11和Firefox 33测试。似乎Safari有问题。但是，Andrew通过从PNG切换到JPEG，在Mac OSx的Safari 8中工作。有关详情，请参阅以下他的评论。

Tested in Chrome38, IE11 and Firefox 33. Seems to have issues with Safari. However, Andrew got it working in Safari 8 on Mac OSx by switching to JPEG from PNG. For details, see his comment below.

这篇关于如何使用html2canvas和jspdf以正确和简单的方式导出到pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！