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

【问题标题】：How to add dynamic content in jsPDF?如何在jsPDF中添加动态内容？
【发布时间】：2020-03-30 13:44:25
【问题描述】：

我正在使用带有 autotable 的 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,
    },
    columnStyles: {
        0: { columnWidth: 35 },
        1: { columnWidth: 35 },
        2: { columnWidth: 185 },
        3: { columnWidth: 35 },
        4: { columnWidth: 35 },
        5: { columnWidth: 184 },
    },
    headerStyles: {
        fillColor: [255, 255, 255],
        textColor: [0, 0, 0],
        fontSize: 8,
        padding: 0,
    },
});
doc.save('test.pdf');

【问题讨论】：

标签： javascript vue.js jspdf jspdf-autotable

【解决方案1】：

我会在 autoTable didDrawPage 挂钩内使用 jsPDF API（例如 doc.text()）重新创建 html。可以查看页眉/页脚示例https://simonbengtsson.github.io/jsPDF-AutoTable/#header-footer

【讨论】：

但是当我尝试添加 doc.text 时，它会抛出一个错误，就像它只接受字符串一样。
我的意思是你会用 jspdf 重新创建布局。即不要使用html。