角8，使用jspdf和autotable-jspdf导入/使用问题

Question

角8- JSPDF和JSPDF-自动表

我需要在html中导出/生成一个pdf格式的一个网格，但是需要用css修改一些DOM，删除一些切换按钮和更改标题等等，而且我找到的所有解决方案都有一些打印操作，比如简单的window.print()。我也尝试了pdfmake-包装器和ngx except，但是它们没有autoTable magic...and

我安装了带有npm的jspdf和jspdf-autotable包。

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

在ange-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");

但是现在，当我在调试期间运行节点命令启动app时，我得到的错误如下：

A-属性'autoTable‘在'jsPDF’类型中不存在。

错误TS2339:在‘类型jsPDF’中不存在属性'default‘。

有什么想法吗？

Answer 1

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

检查所有的文档和受支持的浏览器。

退房，有一个很棒的游乐场和一个角8的例子。

Answer 2

你必须按以下方式使用。我曾经有过同样的问题，但是在向开发人员询问了这个问题之后，我发现您必须使用jsPdf()实例作为autoTable()函数的参数。Rest作为jsdpf的文档。

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 3

我认为你想做的是做这样的事情：

const jsPDF = require('jspdf');

或

import jsPDF from 'jspdf';

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