时间戳

首页 > 解决方案 > jspdf-autotable - didParseCell 不工作

angular - jspdf-autotable - didParseCell 不工作

问题描述

我使用过 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>

标签： angularjspdfjspdf-autotable

解决方案

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

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

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

推荐阅读