Question

我正在尝试使用带有jspdf-autotable的angular导入一个简单表。但是我不能，这是错误

jspdf.plugin.autotable.js:1023 Uncaught TypeError: Cannot set property 'autoTable' of undefined
    at Object.<anonymous> (jspdf.plugin.autotable.js:1023)
    at __webpack_require__ (jspdf.plugin.autotable.js:39)
    at jspdf.plugin.autotable.js:103
    at jspdf.plugin.autotable.js:106
    at webpackUniversalModuleDefinition (jspdf.plugin.autotable.js:12)
    at Object../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js (jspdf.plugin.autotable.js:19)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/components/zone-list/zone-list.component.ts (zone-list.component.ts:12)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/app-routing.module.ts (app-routing.module.ts:3)

对于 package.json ：

"jspdf": "^2.1.0",
"jspdf-autotable": "^2.3.5",

对于 .ts ：

这是导入：

import jsPDF from 'jspdf';
var autoTable = require('jspdf-autotable');

这是下载功能：

var head = [['ID', 'Country', 'Rank', 'Capital']]
var data = [
  [1, 'Denmark', 7.526, 'Copenhagen'],
  [2, 'Switzerland', 7.509, 'Bern'],
  [3, 'Iceland', 7.501, 'Reykjavík'],
  [4, 'Norway', 7.498, 'Oslo'],
  [5, 'Finland', 7.413, 'Helsinki'],
]
const doc = new jsPDF()
autoTable(doc, {
  head: head,
  body: data,
  didDrawCell: (data) => {
    console.log(data.column.index)
  },
})

doc.save('table.pdf')

告诉我出了什么问题？

Answer 1

如果更换，会发生什么

var autoTable = require('jspdf-autotable')与此：import autoTable from 'jspdf-autotable'？

Answer 2

解决方案：请勿使用jspdf，请使用pdfmake [https://www.npmjs.com/package/pdfmake]

（为什么当有一个更好的工具具有更好的功能并且有更简单的编码方式时，为什么要使用越野车工具呢？

当然可以，没有一个库是100％完美的。但是，当我们谈论特殊功能或目的时，某些库比其他库更麻烦。如：我的案例是将HTML表转换为打字稿中的PDF。我也尝试了jspdf-autotable，但没有运气）

我的工作现在变得更加简单，我不需要像html2canvas这样的其他屏幕截图工具来获取我所有表格的屏幕截图，我不再需要担心屏幕截图和图像大小调整。此外，我有一个实际的PDF表格，这意味着我可以从PDF复制数据，而不仅仅是图像了。

让我们开始吧。

安装pdfmake：

（我的案例是为Angular安装的）

npm i pdfmake --save

打字稿代码：

导入：

import pdfMake from "../../../../node_modules/pdfmake/build/pdfmake";
import pdfFonts from "../../../../node_modules/pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

写功能：

现在只需编写要通过PDF下载按钮触发的PDF下载功能

  peopleExportToPdf() {
    let docDefinition = {
      content: [
        {
          table: {
            body: [
              [{ text: 'SL#', bold: true }, { text: 'Name', bold: true }, { text: 'Age', bold: true }],
              [{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3'],
            ]
          }
        }]
    }

    docDefinition.content[0].table.body.pop(); //remove the unnecessary 2nd row
    let slno: number = 1;
    for (let p of this.people) {
      docDefinition.content[0].table.body.push([{ text: slno.toString(), bold: true }, p.name, p.age.toString()]);
      slno = slno +1;
    }
    pdfMake.createPdf(docDefinition).download('Report.pdf');
  }

3个抬头：

我有一个表，该表具有3列slno，名称，年龄。设计桌子根据您的需要。
如果您有非字符串项目，请将其转换为字符串（我必须将我的年龄转换为字符串，如果不这样做，可能会出错-我必须面对它）
您看到我不得不给一个不必要的行，然后将其删除。你可能也必须这样做（我必须这样做是因为我遇到了错误，如果您有找到了更好的解决方案，请发布它）

礼貌：

我从下面的两个链接获得了帮助：

角度：打字稿：未捕获TypeError：无法设置未定义的属性“ autoTable”

2 个答案: