jsPDF html方法总是失败
问题说明
我正在尝试从具有某些内容的html元素(div)生成PDF:
I am trying to generate a PDF from an html element (a div) with some content:
<div id = "toPDF">
<table >
<thead>
<tr>
<th>Destination</th>
<th>Start Date</th>
<th>End Date</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dest1</td>
<td>Date1</td>
<td>Date2</td>
<td>Comment1</td>
</tr>
</tbody>
</table>
</div>
.
.
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://www.it1352.com/app.js"></script>
我正在使用以下javascript:
I am using the following javascript:
window.html2canvas = html2canvas;
var elem = document.getElementById('toPDF');
pdf.html(elem,
{
x: 20,
y: 140,
callback:
function (pdf) {
pdf.text(80, 230, "Test Text");
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
}
});
生成的PDF显示测试文本"，但没有html表格的痕迹.如果删除测试文本"，则输出PDF为空.浏览器控制台显示以下错误:
The resulting PDF shows the "Test Text", but no trace of the html table. If I remove "Test Text" the output PDF is empty. The browser console shows the following error:
TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap
我尝试了不同的选择.我要一个有效的jsPDF.html()示例.
I have tried different options. I am asking for a working jsPDF.html() example.
正确答案
问题很可能是您使用的html2canvas版本. html2canvas 0.4.1不起作用.它应该是html2canvas 1.0.0-alpha.11或更高.但是，当前版本 html2canvas 1.0.0-rc.3 也不起作用，它也给我空白页.至少 html2canvas 1.0.0-alpha.12 仍然对我有用.
The problem is most likely the version of html2canvas you used. html2canvas 0.4.1 is not going to work. It should be html2canvas 1.0.0-alpha.11 or higher. However, current version, html2canvas 1.0.0-rc.3 doesn't work either, it also gives me a blank page. At least html2canvas 1.0.0-alpha.12 still works for me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://www.it1352.com/~/lib/html2canvas/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or html2canvas 1.0.0-alpha.12 is needed -->
<script>
function download() {
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('toPDF'), {
callback: function () {
window.open(pdf.output('bloburl'));
}
});
}
</script>
更新:适用于我的最新版本是
html2canvas v1.0.0-rc.1
这篇好文章是转载于：学新通技术网
