cyt*_*nny 1 javascript highcharts twitter-bootstrap jspdf
我正在使用jsPdf官方演示站点的示例来测试新的addHTML函数,稍加改动就可以直接保存生成的PDF.
console.log("testing");
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
console.log("started");
pdf.save()
console.log("finished");
});
console.log("testing again");
当我运行上面的脚本时,它不会生成任何错误消息,但也不会生成PDF.在控制台中,只显示"测试"和"再次测试",所以我猜这个脚本没有运行.
我错过了什么？我正在使用bootstrap选项卡功能和一些使用highchart生成的图表.处理jsPDF太复杂了吗？
首先,您需要使用html2canvas或rasterizeHTML来使用jsPDF的addHTML方法.另一个问题是jsPDF会覆盖html2canvas库定义的许多方法.只需查看jsPDF源代码并搜索html2canvas即可.即使在我的项目中包含html2canvas脚本后,我也遇到了您描述的完全相同的问题.
最后一个问题是包含脚本的顺序.对我来说,它适用于当前版本的jsPDF(1.1.239)和html2canvas(0.5.0-alpha1),其中包括jsPDF first和html2canvas.在我的项目中它看起来像这样:
<head>
<script src="./lib/jspdf/jspdf.debug.js"></script>
<script src="./lib/html2canvas/html2canvas.js"></script>
<!-- more includes ... -->
</head>
我认为在jsPDF中覆盖html2canvas方法是不好的做法,因为当html2canvas改变时很难维护,正如这个问题所示.
当脚本包括通过RequireJS完成时,这个问题可能会有不同的表现.
小智 5
这是因为回调函数已更改为promise。
进行以下更改。
pdf.addHTML(document.body,function() {
console.log("started");
pdf.save()
console.log("finished");
});
至
pdf.addHTML(document.body).then(()=> {
console.log("started");
pdf.save()
console.log("finished");
});