如何在jsPDF中添加动态内容？

Question

我正在使用带有自动表的jsPDF并用它生成表的PDF。我想在表之前和之后的表头部分添加动态内容。创建PDF时如何添加此HTML。HTML具有动态数据。

HTML：

 <div id="header_row" class="row">
        <div class="col">
           <img id="logo" :src="clientDetails.company_logo" alt="">    
             <p><b>{{clientDetails.company_name}}</b></p>
        </div>

        <div class="col-4 pull-right">
           <p class="text-left"><b>{{assets_name}}</b></p>
           =<p class="text-left"><b>{{site_name}} {{building}} & {{location}}</b></p>
        </div>
 </div>

脚本

var doc = new jsPDF('p', 'pt', 'a4');
var elem = document.getElementById("table");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data, {
    tableLineColor: [189, 195, 199],
    tableLineWidth: 0.75,
    bodyStyles: { lineColor: [189, 195, 199] },
    theme: 'grid',
    styles: {
        fontSize: 8,
        font: 'helvetica',
        cellPadding: 2,
        rowHeight: 2,
        // halign: 'center'
    },
    columnStyles: {
        0: { columnWidth: 35 },
        1: { columnWidth: 35 },
        2: { columnWidth: 185 },
        3: { columnWidth: 35 },
        4: { columnWidth: 35 },
        5: { columnWidth: 184 },
        // etc
    },
    headerStyles: {
        fillColor: [255, 255, 255],
        textColor: [0, 0, 0],
        fontSize: 8,
        padding: 0,
    },
});
doc.save('test.pdf');

Answer 1

我将在autoTable didDrawPage挂钩内使用jsPDF API（例如doc.text（）来重新创建html。