我目前正在开发一个学校管理软件,通常需要导出包含以下内容的html内容data tables
and div tag
.
我已经尝试了所有可能的方法来编写一个能够以良好的方式导出我的 html 数据的代码,最好使用 css。在检查了一些问题和答案后,我尝试使用 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');
});
我为你做了一个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/ http://jsfiddle.net/rpaul/p4s5k59s/5/
在 Chrome38、IE11 和 Firefox 33 中测试。Safari 似乎有问题。然而,Andrew 通过从 PNG 切换到 JPEG,让它在 Mac OSx 上的 Safari 8 中正常工作。有关详细信息,请参阅下面他的评论。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)