Как добавить динамический c контент в jsPDF? - PullRequest
Новая
       44

Как добавить динамический c контент в jsPDF?

2 голосов
/ 30 марта 2020

Я использую jsPDF с автозапуском и создаю PDF таблицы с ним. Я хочу добавить динамическое c содержимое в разделе заголовка перед таблицей и после таблицы. Как я могу добавить это HTML при создании PDF. HTML имеют данные c.

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');

1 Ответ

0 голосов
/ 30 марта 2020

Я бы воссоздал html с API-интерфейсом jsPDF, таким как do c .text () внутри хука autoTable didDrawPage. Вы можете увидеть пример верхнего / нижнего колонтитула https://simonbengtsson.github.io/jsPDF-AutoTable/#header -footer

...