1

我正在使用angular2和Node JS。我已经使用. _ _ npm在 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 { autoTable } from 'jspdf-autotable'; 
import 'jspdf-autotable';

但没有任何工作。

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

var columns = ["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"]
        ];
        var doc = new jsPDF();
        doc.autoTable(columns, data);
        doc.output("dataurlnewwindow");

但是现在当我运行 node 命令来启动应用程序时，在编译过程中我收到错误：

类型“jsPDF”上不存在属性“autoTable”。

有人可以建议吗？

4

5 回答 5

5

我得到了答案：

无需在 component.ts 文件中导入 jspdf 或 jspdf-autotable。

组件.ts：

import { Component, Input, OnInit, Inject } from '@angular/core';
declare let jsPDF;

就我而言

var doc = new jsPDF('l', 'mm', [305, 250]);

var options1 = {
   padding: 50
};

doc.addHTML($('#riskdate_heading'),0,10,options1 ,() => {

   doc.addHTML($('#risktitle'),0,30,options1, () => {

     var res = doc.autoTableHtmlToJson(document.getElementById("riskTable"));

                var header = function(data) {
                    doc.setFontSize(18);
                    doc.setTextColor(40);
                    doc.setFontStyle('normal');
                };

                var riskoptions = {
                                    tableWidth: 'auto',
                                    addPageContent: header,
                                    margin: {  top: 10, horizontal: 7 },
                                    startY:  50,
                                    columnStyles: {0: {columnWidth: 'wrap'}}
                                };

                doc.autoTable(res.columns, res.data, riskoptions);

                doc.save("table.pdf");
        });
    });
于 2017-11-17T11:53:19.703 回答
5

以下在 Angular 11、jsPDF 2.3.1、jspdf-autotable 3.5.14 中为我工作：

import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
  
public printTable() {

    const doc = new jsPDF('l', 'mm', 'a4'); 
    
    const head = [['ID', 'Country', 'Index', 'Capital']]
    const data = [
        [1, 'Finland', 7.632, 'Helsinki'],
        [2, 'Norway', 7.594, 'Oslo'],
        [3, 'Denmark', 7.555, 'Copenhagen'],
        [4, 'Iceland', 7.495, 'Reykjavík'],
        [5, 'Switzerland', 7.487, 'Bern'],
        [9, 'Sweden', 7.314, 'Stockholm'],
        [73, 'Belarus', 5.483, 'Minsk'],
    ]

    autoTable(doc, {
        head: head,
        body: data,
        didDrawCell: (data) => { },
    });

    doc.save('table.pdf');
}
于 2021-06-28T18:01:43.917 回答
5

对于那些使用 angular 6/7 的人，请尝试执行以下操作：

而不是仅仅使用这个：

declare var jsPDF: any;

尝试这个：

declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');

它对我来说很好。

于 2019-01-23T17:19:18.743 回答
0

假设这是一个打字稿问题，并且您已@types/jspdf作为 devDependency 安装，您只需要扩展 jsPDF 类型...

import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';

interface jsPDFCustom extends jsPDF {
    autoTable: (options: UserOptions) => void;
}

const doc = new jsPDF() as jsPDFCustom;
于 2021-10-14T03:46:43.217 回答
0

嗨，我认为您必须使用 jspdf.plugin.autotable.min.js 和 jspdf.js 才能工作。这是 github 链接，您可以从上面的链接中参考https://github.com/simonbengtsson/jsPDF-AutoTable Sample。

    // app.component.ts or any other component
import { Component } from '@angular/core';

declare
var jsPDF: any; // Important

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';

    constructor() {
        var doc = new jsPDF('p', 'pt');
        doc.autoTable(columns, data);
        doc.save("table.pdf");
    }
}

更新示例：

    import { Component } from '@angular/core';
declare var jsPDF: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
  constructor() { 
    console.log('hi i m constr');
    var test = new jsPDF();
    console.dir(test.autoTable);
  }

}
于 2017-11-17T07:59:43.647 回答