Angular: Typescript: Uncaught TypeError: Cannot set property 'autoTable' of undefined

Question

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

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 table to PDF in typescript。我也试过 jspdf-autotable 但没有成功）

我的工作现在更简单了，我不需要像 html2canvas 这样的截图工具来获取我所有 table 的截图，我不再需要担心我的截图了，图像调整大小。此外，我有一个实际的 table 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 个单挑：

我有一个 table，它有 3 列 slno、name、age。设计您的 table 根据您的需要。
如果您有 non-string 项，请将其转换为字符串（我不得不将我的年龄转换为字符串，如果你不这样做，你可能会出错 - 我不得不面对）
你看我不得不给出一个不必要的行然后将其删除。你可能也必须这样做（我不得不这样做，因为我遇到了错误，如果你有找到更好的解决方案请post它）

礼貌：

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

How to convert html table to pdf using pdfmake
this github link

Angular: Typescript: Uncaught TypeError: Cannot set property 'autoTable' of undefined

Angular: Typescript: Uncaught TypeError: Cannot set property 'autoTable' of undefined

javascript

angular

typescript

jspdf

jspdf-autotable