jspdf-autotable - didParseCell 不工作答案

【问题标题】：jspdf-autotable - didParseCell not workingjspdf-autotable - didParseCell 不工作
【发布时间】：2019-08-08 12:49:20
【问题描述】：

我使用过 jspdf-autotable，之前它可以正常工作。但是不知道为什么，一个月后突然就不行了。以前，在 didParseCell HookData 中，我得到了 tdElement 的值。但现在我没有发现任何价值。新版本中 HookData 的配置有变化吗？这是我的代码 -

app.component.ts

capture() {

    var doc = new jspdf('l', 'pt', 'a4');

    var cols = [{ title: 'Id', dataKey: 'id' },
    { title: 'Source-Field Resolved Path', dataKey: 'sourceName' }, { title: 'Source Field Technical Name', dataKey: 'sfieldName' },
    { title: 'Source Data Type', dataKey: 'sdataType' }, { title: 'Target Field Resolved Path', dataKey: 'targetName' },
    { title: 'Target Field Technical Name', dataKey: 'tfieldName' }, { title: 'Target Data Type', dataKey: 'tdataType' }, { title: 'Condition', dataKey: 'urgencyName' },
    { title: 'Description', dataKey: 'descriptionName' }, { title: 'Source Field Row No.', dataKey: 'directRowNo' },
    { title: 'Source Field Path', dataKey: 'sourceFieldPath' }, { title: 'Source Field Name', dataKey: 'sourceFieldName' },
    { title: 'Data Type Verified', dataKey: 'datatypeVerified' }]

    var tableData = [];
    for (var i = 0; i < this.responseData.length; i++) {
      tableData.push({
        'id': this.responseData[i].id, 'sourceName': this.responseData[i].sourceName, 'sfieldName': this.responseData[i].sfieldName, 'sdataType': this.responseData[i].sdataType,
        'targetName': this.responseData[i].targetName, 'tfieldName': this.responseData[i].tfieldName, 'tdataType': this.responseData[i].tdataType, 'urgencyName': this.responseData[i].urgencyName,
        'descriptionName': this.responseData[i].descriptionName, 'directRowNo': this.responseData[i].directRowNo, 'sourceFieldPath': this.responseData[i].sourceFieldPath,
        'sourceFieldName': this.responseData[i].sourceFieldName, 'datatypeVerified': this.responseData[i].datatypeVerified, 'backgroundColor': this.responseData[i].backgroundColor
      })
    }
    doc.autoTable(cols, tableData, {


        didParseCell: function (HookData ){


        console.log("HookData = ", HookData)


        var tdElement;


        tdElement = HookData.row.raw.backgroundColor
          ;
        console.log("tdElement = ", tdElement)
        if (tdElement == false && HookData.column.raw.dataKey == "datatypeVerified") {

          HookData.cell.styles.fontStyle = 'bold';
          HookData.cell.styles.textColor = [255, 0, 0]
        }


      }

    })


    document.getElementById('obj').dataset.data = 
    doc.output("datauristring");


    var blob = doc.output("blob");
    window.open(URL.createObjectURL(blob));

  }

app.component.html

<button class="btn btn-default" style="margin-left:30px" (click) = "capture()" id="capture" >Capture</button>

<object id="obj"  [attr.data]  type="application/pdf"> </object>

【问题讨论】：

能否提供console.log(HookData)的输出
您的初始化似乎已经过时了。 doc.autoTable(columns, data, options) 现在是 doc.autoTable({head: ..., body: ... foot: ..., columns: ..., ...})。你用的是哪个版本？也许你应该看看更新日志github.com/simonbengtsson/jsPDF-AutoTable/releases/tag/v3.0.0

标签： angular jspdf jspdf-autotable

【解决方案1】：

您正在使用 javascript 中的列和行来初始化您的自动表。因此 autoTable 没有连接到任何 html 表。当 autoTable 使用html 选项初始化时，钩子数据的原始属性（hookData.row.raw）只是 tr 元素的一个实例。

现已验证，hookData.row.raw是最新版本中tr元素的实例，

doc.autoTable({html: '.table', didDrawCell: data => {
    console.log(data.row.raw) // Instance of <tr> element
}});

【讨论】：