使用JSPDF从复杂的html表生成PDF

Question

我试图使用JSPDF从html生成pdf,html有一个复杂的表格,下面添加了图片.

你可以在这个小提琴中看到,到目前为止我尝试了什么.

pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
    'width': margins.width, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},

function (dispose) {
    // dispose: object with X, Y of the last line add to the PDF 
    //          this allow the insertion of new lines after html
    pdf.save('Test.pdf');
}, margins);

问题是,当我尝试生成pdf时,我得到了

Uncaught TypeError: Cannot read property 'name' of undefined

是否可以将JSPDF用于这种复杂的表,或者它只适用于简单的表.

编辑: 通过不同的方式解决这个问题,这就是我所做的

1. 我将HTML表格转换为Canvas html2canvas.js
2. 您可以使用canvas获取画布作为Base64图像canvas.toDataURL("image/jpeg")
3. 一旦我获得了Base64图像,使用JSPDF创建了空PDF并使用JSPDF的addImage功能,我设法将Base64图像嵌入到PDF中.

信用归于我的大脑.

Answer 1

我能够通过修改jspdf.debug.js(版本1.2.61)的第6203行来解决这个问题:

while (j < tableRow.cells.length && headers[j] != undefined) {

原来是:

while (j < tableRow.cells.length) {

或者,我可以通过在正在处理的tr中添加另一个td来消除它(它只有一个td,这显然导致了问题).

我想我会尝试将其作为错误修复提交.

Answer 2

我使用 chrome 调试器单步调试了代​​码，看起来 jspdf 在表格第一行中的 colspan 存在问题。

这似乎是他们的库中的一个错误，您不能在每个表的标题或第一行中使用 col span。