web-dev-qa-db-ja.com

Angular2：pdfmakeライブラリの使用方法

私のAngular 2（version = 4.2.x）プロジェクトでクライアント側pdfライブラリを使用しようとしています pdfmake .

.angular-cli.jsonファイルで、次のようにjsを宣言しました。

"scripts": [
    "../node_modules/pdfmake/build/pdfmake.js",
    "../node_modules/pdfmake/build/vfs_fonts.js"
  ]

そして、app.component.tsでは、次のように使用しました。

import * as pdfMake from 'pdfmake';

@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   pdf: any;
   downloadPdf() {
    let item = {firstName: 'Peter', lastName: 'Parker'};
    this.pdf = pdfMake;
    this.pdf.createPdf(buildPdf(item)).open();
  }
}

function buildPdf(value) {
   var pdfContent = value;
   var docDefinition = {
     content: [{
    text: 'My name is: ' + pdfContent.firstName  + ' ' + pdfContent.lastName + '.'
     }]
   }
   console.log(pdfContent);
   return docDefinition;
}

アプリをロードするときに、ブラウザコンソールで次のエラーが発生しました。

Uncaught TypeError: fs.readFileSync is not a function
at Object.<anonymous> (linebreaker.js:15)
at Object.<anonymous> (linebreaker.js:161)
at Object.../../../../linebreak/src/linebreaker.js (linebreaker.js:161)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/textTools.js (textTools.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/docMeasure.js (docMeasure.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/layoutBuilder.js (layoutBuilder.js:7)
at __webpack_require__ (bootstrap b937441…:54)

この問題を解決するための私の回避策は次のとおりです。

Pdfmake.jsとvfs_fonts.jsをassetフォルダーにコピーし、これをindex.htmlに追加します。

<script src='assets/pdfmake.min.js'></script>
<script src='assets/vfs_fonts.js'></script>

これをapp.component.tsから削除します

import * as pdfMake from 'pdfmake';

そして、これをapp.component.tsに追加します。

declare var pdfMake: any;

最後に、これを.angular-cli.jsから削除します。

"../node_modules/pdfmake/build/pdfmake.js",
"../node_modules/pdfmake/build/vfs_fonts.js"

動作しますが、まだ回避策です。

誰でもこのライブラリをAngular/Typscriptの方法で使用する方法を知っていますか？

どうもありがとう！

angularpdfmake
11
Softhinker.com

@benny_boeによる上記の指示に従って、私はそれを機能させました！以下に要約します。

最初、

npm install pdfmake --save

次に、以下をtypings.d.tsに追加します：

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';

3番目に、pdfMakeが使用されているファイル（コンポーネントまたはサービス）で、以下の行を追加します。

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

最後に、通常どおりpdfMake.xxx（）を使用します。

21
Softhinker.com

まず最初に。 notサードパーティのスクリプトを.angular-cli.jsonに追加する必要があります[〜＃〜] and [〜＃〜] TSファイルにインポートを追加します。 Angular CLI。からの Global scripts Story）を見てください。

Scripts配列を介してライブラリをインポートしたら、TypeScriptコードのimportステートメントを使用してnotインポートする必要があります...

（pdfmakeには型指定がないため、構成ファイルをunsingするときに宣言する必要があります。）

TSファイルに追加する場合は、import * as pdfMake from 'pdfmake';（サーバー側バージョン！）をクライアント側バージョン（'pdfmake/build/pdfmake'）に置き換えます。フォント（'pdfmake/build/vfs_fonts'）も追加する必要があります。追加しないと、エラーも発生します。

インポートが次のように見える場合、動作するはずです：

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
11
benny_boe

Angular-cli Stories Global Scripts に従ってグローバルスクリプトを使用する場合の別の簡単なアプローチは、指示に注意深く従う場合です。 [〜＃〜] if [〜＃〜]ライブラリにはタイピングがありません。

angular-cli.jsonファイルについて

"scripts": [
  "../node_modules/pdfmake/build/pdfmake.min.js",
  "../node_modules/pdfmake/build/vfs_fonts.js"
],

ON src/typings.d.tsファイル

追加 declare var pdfMake: any;以下の行。

これで、アプリケーションのどこでもpdfMakeグローバル変数が使用可能になりました。

コンストラクターまたは任意のinitメソッドでpdfMakeを記録してみてください

ngOnInit() { console.log(pdfMake); }

[〜＃〜] output [〜＃〜]

{
    createdPdf: f(t),
    vfs: {
        Roboto-Italic.ttf: "some long encoded string...",
        Roboto-Medium.ttf: "some long encoded string...",
        Roboto-MediumItalic.ttf: "some long encoded string...",
        Roboto-Regular.ttf: "some long encoded string...",
    }
}

つまり、すぐに使用できます。

2
Roel
npm i pdfmake;

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
  var dd = {
    content: [
      {
        layout: 'lightHorizontalLines', // optional
        table: {
          // headers are automatically repeated if the table spans over multiple pages
          // you can declare how many rows should be treated as headers
          headerRows: 1,
          widths: [ '*', 'auto', 100, '*' ],

          body: [
            [ 'First', 'Second', 'Third', 'The last one' ],
            [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
            [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
          ]
        }
      }
    ]
  };
pdfMake.createPdf(dd).download();
1
Ayush Bhadauria