Как добавить пользовательскую последнюю строку в таблицу с помощью jspdf-Autotable - PullRequest
Новая
       41

Как добавить пользовательскую последнюю строку в таблицу с помощью jspdf-Autotable

0 голосов
/ 09 апреля 2020

Я пытаюсь создать небольшое приложение с jspdf и jspdf-Autotable , но я не могу найти, как создать пользовательскую последнюю строку с другим значением переменной в существующем Таблица.

Что я только что сделал, так это: 

  doc.autoTable({ 
    body: concepts,
    columns: [{ header: 'Concept', dataKey: 'name' }, { header: 'Amount', dataKey: 'amount' }],
    didDrawPage: function (data) {
        let rows = data.table.body;
        rows.push({ 
          content: 'Total = ' + total,
          colSpan: 2
        });
        if (data.row.index === rows.length - 1) { doc.setFillColor(239, 154, 154); }
    }
  });

Я почти уверен, что меня смущает вопрос о том, как решить эту проблему. total поставляется с числовым значением, но я хочу напечатать его только в одной пользовательской последней строке, но внутри таблицы, как в случае с правилом Excel.

Любое предложение будет полезным! Спасибо.

1 Ответ

1 голос
/ 10 апреля 2020

Вы должны добавить свои пользовательские данные перед обработкой элементов. Используйте ... для деструктурирования данных и объединения с новой строкой. 

function generate() {
  var doc = new jsPDF();

  var data = [
    {name: "Bar", amount: 1200}, 
    {name: "Zap", amount: 200}, 
    {name: "Foo", amount: 320}];
    
  var total = data.reduce((sum, el) => sum + el.amount, 0);

  var body = [...data.map(el => [el.name, el.amount]), 
    [{content: `Total = ${total}`, colSpan: 2, 
      styles: { fillColor: [239, 154, 154] }
    }]]

  doc.autoTable({
    head: [['Concept', 'Amount']],
    body: body
  });

  doc.save("table.pdf");
}
<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.4.1/dist/jspdf.plugin.autotable.js"></script>
<button onclick="generate()">Generate PDF</button>
...