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

Попытка использовать PDF файл pdf- книги на стороне клиента в моем проекте Angular 2 (version = 4.2.x).

В файле.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 в папку с ресурсами, а затем добавьте это в 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?

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

Ответ 1

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

Во-первых,

npm install pdfmake --save

Во-вторых, добавьте ниже typings.d.ts:

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.xxx(), как обычно.

Ответ 2

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

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

(Нет типов для pdfmake, поэтому вам нужно объявить их при отключении файла конфигурации..)

Итак, если вы хотите добавить его в свой 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;

Ответ 3

Еще один простой подход при использовании глобальных скриптов в соответствии с глобальными сценариями Angular Cli Stories, если вы внимательно следуете инструкциям. Если в библиотеке нет ни одного символа.

В файле 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.

Попробуйте записать 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...",
    }
}

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

Ответ 4

Не нужно быть таким сложным. Я тестировал, это работает для меня.

  1. npm install pdfmake --save
  2. Внутри компонента или службы: import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts'; import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts';
  3. constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; } constructor: constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; } constructor() { pdfMake.vfs = pdfFonts.pdfMake.vfs; }
  4. где угодно вы хотите использовать pdfmake: const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open(); const dd = { content: 'your pdf data' }; pdfMake.createPdf(dd).open();

Ответ 5

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();