Angular2: как использовать библиотеку pdfmake

попытка использовать клиентскую библиотеку pdf в моем Angular 2 (версия=4.2.x) проект.

In .угловой-cli.файл json, я объявил js следующим образом:

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

а затем в приложении.деталь.ТС, я использовал его так:

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 в папку assets и затем добавить в индекс.HTML-код:

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

удалить из приложения.деталь.ТС

import * as pdfMake from 'pdfmake';

и добавить в приложение.деталь.ТС:

declare var pdfMake: any;

наконец удалите это .угловой-cli.js:

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

это работает, но это все-таки временное решение.

кто-нибудь знает, как использовать эту библиотеку в Angular/Typscript?

Спасибо большое!

8
angular pdfmake

3 ответов

следуя инструкции выше, сделанной @benny_boe, я сделал это работать! Позвольте мне резюмировать его следующим образом:

во-первых,

npm install pdfmake --save

во-вторых, добавьте ниже к наборам.д.ТС:

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

В-третьих, в файле, где используется pdfMake, компонент или служба, добавьте следующие строки:

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

наконец, используйте pdfMake.ХХХ() как обычно.

15

сначала о главном. Ты не нужно добавить вам сторонние скрипты в .angular-cli.json и добавьте импорт в файлы TS. Взгляните на глобальные скрипты история из углового CLI.

как только вы импортируете библиотеку через массив скриптов, Вы должны не импортируйте его с помощью инструкции import в коде TypeScript...

(нет typings для pdfmake поэтому вам нужно объявить их, когда unsing файл config..)

поэтому, если вы хотите добавить его в свой файл 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;
8

еще один простой подход при использовании глобальных скриптов в соответствии с angular-cli Истории Глобальных Скриптов если вы внимательно следуйте инструкции. если библиотеки нет typings.

на угловой-cli.файл json

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

на src / typings.d.TS file

добавить declare var pdfMake: any; строку ниже.

теперь в любом месте вашего приложения pdfMake глобальная переменная сейчас доступный.

попробуйте войти pdfMake в contructor или любые методы init

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

выход

{
    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...",
    }
}

что означает, что он готов к использованию.

1