Angular8、使用jspdf和autotable-jspdfimport/usage问题

Question

Angular 8 - JSPDF & JSPDF-AutoTable

我需要 export/generate 一个 pdf 基础在 html 中的一个网格，但有必要用 css 进行一些 DOM 更改，删除一些切换按钮并更改 header 等等，我发现的所有解决方案都有一些印刷效果，比如简单的 window.print()。我也尝试了 pdfmake-wrapper 和 ngx-export-as，但它们没有 autoTable 魔法......最后一个 dom 更改被忽略，除非我使用 Renderer2 DOM 操作...但我需要一个解决方案 css class 更改注入并且没有轻弹，所以我取回了 JSPDF。

我用 npm 安装了 jspdf 和 jspdf-autotable 包。

"dependencies": {
    ...
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.2.4",
    ...
}

在 angular-cli.json 文件中，我嵌入了脚本：

"scripts": [ 
        "../node_modules/jspdf/dist/jspdf.min.js",
        "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
      ],

在我的 component.ts 文件中，我按如下方式导入了这些文件：

 import * as jsPDF from 'jspdf'; 
 import * as autoTable from 'jspdf-autotable';

我也试过这些行来导入jspdf-autotable

import * as jsPDF from 'jspdf'; 
import 'jspdf-autotable';

我也试过另一种组合。

import jsPDF = require('jspdf');
import { autoTable as AutoTable } from 'jspdf-autotable';

但是没有任何效果。

// 在我的 component.ts 文件中，我使用的示例代码如下：

let columns = ["ID", "Name", "Age", "City"];
var data = [
    [1, "Jonatan", 25, "Gothenburg"],
    [2, "Simon", 23, "Gothenburg"],
    [3, "Hanna", 21, "Stockholm"]
];
const doc = new jsPDF(); // or let doc = new jsPDF.default();
doc.autoTable(columns, data);
doc.save("filename");

但是现在当我运行节点命令启动应用程序然后在调试期间，我收到错误如下：

a - 属性 'autoTable' 在类型 'jsPDF' 上不存在。

b - 错误 TS2339：属性 'default' 在类型 'typeof jsPDF' 上不存在。

有什么想法吗？

Answer 1

我想你会想要做的是做这样的事情：

const jsPDF = require('jspdf');

或

import jsPDF from 'jspdf';

这假设您的 node_modules 已被配置为路径的一部分，但如果您使用的是 CLI，那么您应该在这里做好准备。

Answer 2

使用这个例子

var generateData = function (amount) {
    var result = [];
    var data =
    {
        coin: "100",
        game_group: "GameGroup",
        game_name: "XPTO2",
        game_version: "25",
        machine: "20485861",
        vlt: "0"
    };
    for (var i = 0; i < amount; i += 1) {
        data.id = (i + 1).toString();
        result.push(Object.assign({}, data));
    }
    return result;
};

function createHeaders(keys) {
    var result = [];
    for (var i = 0; i < keys.length; i += 1) {
        result.push({
        'id' : keys[i],
            'name': keys[i],
            'prompt': keys[i],
            'width': 65,
            'align': 'center',
            'padding': 0
        });
    }
    return result;
}

输出：

Answer 3

我找到了解决方案，但换了另一个包，PDFMaker。

全部勾选documentation and supported browsers。

结帐，有一个很棒的playground and one example in Angular 8。

Answer 4

问题的正确答案应该是这样的。如果以后有人需要这个，请发布，

参考 https://github.com/simonbengtsson/jsPDF-AutoTable for autable

你需要，

npm install jspdf jspdf-autotable

和 es6，

import jsPDF from 'jspdf'
import 'jspdf-autotable'

const doc = new jsPDF()
doc.autoTable({ html: '#my-table' })
doc.save('table.pdf')

Answer 5

您必须按以下方式使用。我有一段时间有同样的问题，但在问了开发人员的问题后，我发现你必须使用 jsPdf() 的实例作为 autoTable() 函数的参数。其余的作为jsdpf的documentation。

import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

const doc = new jsPDF();

const columns = [['First Column', 'Second Column', 'Third Column']];
const data = [
['Data 1', 'Data 2', 'Data 3'],
['Data 1', 'Data 2', 'Data 3']
];

 autoTable(doc, {
      head: columns,
      body: data,
      didDrawPage: (dataArg) => { 
       doc.text('PAGE', dataArg.settings.margin.left, 10);
      }
 }); 

doc.save('table.pdf');

例子
源代码
https://codesandbox.io/s/currying-pine-wjp1g?file=/src/app/app.component.ts
现场演示
https://wjp1g.csb.app/

Answer 6

你得到的错误不是因为导入。如果使用 doc.autoTable 是错误的原因。以下对我有用，它也在官方文档中给出。

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';  

autoTable(doc, { html: '#report-per-depot',startY: 30, });

对于不同的示例，https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js

参考link：https://github.com/simonbengtsson/jsPDF-AutoTable#installation

以上内容摘录link：

您也可以使用导出的autoTable 方法。这在 typescript 和其他 jsPDF 版本上效果更好。

 import jsPDF from 'jspdf'
 // import jsPDF = require('jspdf') // // typescript without esModuleInterop flag
 // import jsPDF from 'yworks-pdf' // using yworks fork
 // import jsPDF from 'jspdf/dist/jspdf.node.debug' // for nodejs
 import autoTable from 'jspdf-autotable'

 const doc = new jsPDF()
 autoTable(doc, { html: '#my-table' })
 doc.save('table.pdf')

Angular8、使用jspdf和autotable-jspdfimport/usage问题

Angular 8, using jspdf and autotable-jspdf import/usage issues

jspdf

typescript

jspdf-autotable

angular