时间戳

首页 > 解决方案 > Angular 6 - jsPDF -autotable - PDF 无法正确生成

javascript - Angular 6 - jsPDF -autotable - PDF 无法正确生成

问题描述

我不知道哪里做错了（循环中）。目前，pdf 仅使用第一个对象的第一个属性生成。标题也不显示。试图在 jsbpdf autoTable 中加载 json 响应。暂时，请考虑下面的模拟数据。

至今，

测试.ts

prepareDoc(){

  const header = [['Devloper ID', 'Develoepr Name', 'Department', 'Location', 'Rate(Hr)', 'Current Status', 'Contact']];

    const data = [{
          'id': 'xxx-001',
          'dev_name': 'qqqqq',
          'department': 'ABC',
          'loc': 'loc-001',
          'hourly_rate': '00',
          'current_Status': 'Open',
          'contact': '--'
        }, {
          'id': 'xxx-002',
          'dev_name': 'eeeee',
          'department': 'DEF',
          'loc': 'loc-002',
          'hourly_rate': '00',
          'current_Status': 'Engaged',
          'contact': '--'
        }, {
          'id': 'xxx-003',
          'dev_name': 'rrrrr',
          'department': 'IJK',
          'loc': 'loc-003',
          'hourly_rate': '00',
          'current_Status': 'Qued(5)',
          'contact': '--'
        }, {
          'id': 'xxx-004',
          'dev_name': 'bbbbb',
          'department': 'LMN',
          'loc': 'loc-004',
          'hourly_rate': '00',
          'current_Status': 'Vacction',
          'contact': '--'
        }];

        data.forEach(elm => {
           const temp = [elm.id, elm.dev_name, elm.department, elm.loc, elm.hourly_rate, elm.current_Status, elm.contact];
           rows.push(temp);
           console.log('Rows', rows); // showing all data
         });

        downloadPDF.autoTable(header, rows);
        downloadPDF.save('demo.pdf');
}

html

<button (click)='prepareDoc()'></button>

问题

PFA：生成没有标题和其他数据的 pdf

pdf生成没有标题和其他数据

请帮助我

标签： javascriptangulartypescriptjspdfjspdf-autotable

解决方案

您应该像这样使用 autoTable 方法：

downloadPDF.autoTable({
              head: header,
              body: rows,
            });

它对我有用。我用这个代码检查了它https://codepen.io/anon/pen/WqvqVX：

const downloadPDF = new jsPDF();
function prepareDoc() {
  const header = [['Devloper ID', 'Develoepr Name', 'Department', 'Location', 'Rate(Hr)', 'Current Status', 'Contact']];
const rows=[];
    const data = [{
          'id': 'xxx-001',
          'dev_name': 'qqqqq',
          'department': 'ABC',
          'loc': 'loc-001',
          'hourly_rate': '00',
          'current_Status': 'Open',
          'contact': '--'
        }, {
          'id': 'xxx-002',
          'dev_name': 'eeeee',
          'department': 'DEF',
          'loc': 'loc-002',
          'hourly_rate': '00',
          'current_Status': 'Engaged',
          'contact': '--'
        }, {
          'id': 'xxx-003',
          'dev_name': 'rrrrr',
          'department': 'IJK',
          'loc': 'loc-003',
          'hourly_rate': '00',
          'current_Status': 'Qued(5)',
          'contact': '--'
        }, {
          'id': 'xxx-004',
          'dev_name': 'bbbbb',
          'department': 'LMN',
          'loc': 'loc-004',
          'hourly_rate': '00',
          'current_Status': 'Vacction',
          'contact': '--'
        }];

        data.forEach(elm => {
           const temp = [elm.id, elm.dev_name, elm.department, elm.loc, elm.hourly_rate, elm.current_Status, elm.contact];
           rows.push(temp);
           console.log('Rows', rows); // showing all data
         });

        downloadPDF.autoTable({
          head: header,
          body: rows,
        });
        downloadPDF.save('demo.pdf');
}

推荐阅读