web-dev-qa-db-ja.com

angular 5でjsPDFとjspdf-autotableを使用する方法

Angular 5.2.0プロジェクトでjsPDFとjspdf-autotableを使用しようとしています。package.jsonは次のとおりです（関連部分）：

"dependencies": {
    ...
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2"
    ...
}

私のangle-cli.jsonは以下です（関連する部分）：

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

私のコンポーネント（関連部品）：

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

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})
export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // TypeScript compile time error
        doc.save('table.pdf');
    }
}

それは言います：

[ts] Property 'autoTable' does not exist on type 'jsPDF'.

コンポーネントのインポートを次のものに置き換えようとしました。

// import * as jsPDF from 'jspdf';
// import 'jspdf-autotable';
declare var jsPDF: any;

コンパイル時エラーはありませんが、downloadPDF（）関数の実行中に次のように表示されます。

ERROR ReferenceError: jsPDF is not defined
angularjspdfjspdf-autotable
5
RIDVAN TANIK

angular 5でjspdf-autotableを使用するには、npmを介してjspdfおよびjspdf-autotableをインストールする必要があります

npm install jspdf-autotable --save

また、jspdfおよびjspdf-autotableファイルを、angular-cli.jsonのスクリプト配列に追加します

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

コンポーネントではjspdfまたはjspdf-autotableをインポートすることはありません

declare var jsPDF: any;

もちろん、jspdf-autotableを使用する前に、jspdfをインストールし、npmを介して@ types/jspdfを開発する必要があります。

npm install jspdf --save
npm install @types/jspdf --save-dev
1
RIDVAN TANIK

私のために働いていますAngular 5。

angular 5でjspdf-autotableを使用するには、npmを介してjspdfとjspdf-autotableをインストールする必要があります

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

また、jspdfおよびjspdf-autotableファイルを、angular-cli.jsonのスクリプト配列に追加します

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

コンポーネントでは、jspdfまたはjspdf-autotableだけをインポートすることはありません。

次のインポートは忘れてください。


 
 import * 'jspdf'からjsPDFとして; 
 import 'jspdf-autotable';

Before @Componentを使用するだけです：

declare var jsPDF: any;

コンポーネント（関連部品）：

declare var jsPDF: any;

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})

export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // TypeScript compile time error
        doc.save('table.pdf');
        }
    }
8
Alciomar Hollanda

私はangular 7とちょうどdeclare var jsPDF: any;は私には機能しません。いくつかのグーグルの後、解決策は次のとおりでした。

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

そしてもちろん、npmからモジュールをインストールし、angular.jsonのスクリプト配列に含めました。それは私には問題ありません。

4
André Pacheco

まず、.jsのstylesプロパティでangular-cli.jsonファイルを宣言しました。それらをscriptsに追加する必要があります。構成では、jspdfスクリプトをangular-cli.jsonのscriptsに追加する必要があります。

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

jspdfをコンポーネントにインポートする必要はありません。 declare var jsPdf: anyで十分です。

2
Efe

Angular-cli.jsonで

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

あなたのプロジェクトで

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

私のためのこの仕事

2
Jim

このようにTypeScriptを喜ばせることができました：

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

interface jsPDFWithPlugin extends jsPDF {
  autoTable: (options: UserOptions) => jsPDF;
}
...
const doc = new jsPDF('portrait', 'px', 'a4') as jsPDFWithPlugin;
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', '[email protected]', 'Sweden'],
    ['Castille', '[email protected]', 'Norway']
  ]
});

Angular 7。

1
Vladimir Banderov

declare var jsPDF：any;を使用できる場合、Chrome、IEおよびその他のブラウザーでも動作しますが、Firefoxブラウザーでは動作しません。

この場合、次の手順を実行できます。

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

その他の部分は同じように残ります：

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

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

したがって、すべてのブラウザで反抗的に動作します。それはいかに簡単か:)

1
Rahul Chavan

この問題を解決し、最初にJspdf import *をjsPDFとして 'jspdf'からインポートします。私はcodesmells taticを使用し、jspdf autotableのコンテンツをコピーし、jspdf.js内に貼り付けました。

公式サイトでは、// declare var jsPDF：any;を使用する必要があると述べています。 //重要。私の場合はうまくいきません。'jspdf 'からjsPDFとしてimport *を試してください。代わりに。

スクリプト内のangle.jsonで：

「./node_modules/jspdf/dist/jspdf.min.js」、「./node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js」、

0
gaston villafañe

角度8 +

これは、私がAngular 8で行った方法です。以下の例では、フェイカーサービスを使用して偽のユーザーを生成します。API応答で変更できます。

Npm経由でパッケージをインストールする

npm i jspdf jspdf-autotable faker --save

インストールの種類

npm install @types/jspdf  @types/faker --save-dev

angular.jsonに以下のエントリを追加します

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

component.ts


import * as faker from 'faker'; // Not really require by jspdf or jsPDF-AutoTable 
declare var jsPDF: any;


@Component({
  selector: 'faker',
  templateUrl: './faker.component.html',
})


export class FakerPDFGeneratorComponent {



 headRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

    footRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

   bodyRows(rowCount) {
    rowCount = rowCount || 10;
    let body = [];
    for (var j = 1; j <= rowCount; j++) {
      body.Push({
        id: j,
        name: faker.name.findName(),
        email: faker.internet.email(),
        city: faker.address.city(),
        expenses: faker.finance.amount(),
      });
    }
    return body;
  }

createPdf() {
    var doc = new jsPDF();

    doc.setFontSize(18);
    doc.text('With content', 14, 22);
    doc.setFontSize(11);
    doc.setTextColor(100);

    // jsPDF 1.4+ uses getWidth, <1.4 uses .width
    var pageSize = doc.internal.pageSize;
    var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth();
    var text = doc.splitTextToSize(faker.lorem.sentence(45), pageWidth - 35, {});
    doc.text(text, 14, 30);

    doc.autoTable({
      head: this.headRows(),
      body: this.bodyRows(40),
      startY: 50,
      showHead: 'firstPage'
    });

    doc.text(text, 14, doc.autoTable.previous.finalY + 10);

    doc.save('table.pdf');
  }

}

コードとデモを試してみてください

Edit Angular

0
Anjum....