Как использовать jsPDF с angular 2

У меня возникла ошибка: jsPDF не определен, я использую следующий код:

import { Component, OnInit, Inject } from '@angular/core';
import 'jspdf';
declare let jsPDF;
@Component({
  ....
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');    
        doc.save('Test.pdf');
    }
}

У меня установлена npm jsPDF, но я не знаю, как импортировать jspdf и запускать с angular -cli: 1.0.0-beta.17

Ответ 1

Я сделал это, выполнив много R & D, их несколько шагов, чтобы следовать ниже: Установите:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Добавить следующее в angular -cli.json:

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

HTML:

<button (click)="download()">download </button>

компонент ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}

Ответ 2

Я создал демонстрацию jsPdf на основе этого ответа с помощью @gsmalhotra

Сначала установите

npm install jspdf --save

Я использовал массив изображений, сначала преобразовывая изображение в base64 (jsPDF не разрешает URL-адреса изображений)

getBase64Image(img) {
  var canvas = document.createElement("canvas");
  console.log("image");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/jpeg");
  return dataURL;
}

Затем в цикле я вызывал функцию выше, которая возвращает изображение base64, а затем добавляет изображение в PDF с помощью doc.addImage().

for(var i=0;i<this.images.length;i++){
   let imageData= this.getBase64Image(document.getElementById('img'+i));
   doc.addImage(imageData, "JPG", 10, (i+1)*10, 180, 150);
   doc.addPage();
}

HTML-код

<div class="col-md-4" *ngFor="let img of images;let i=index">
    <img id="img{{i}}" class="img-fluid" crossOrigin="Anonymous" [src]="img.url">
</div>

Демо-версия
Код

Ответ 3

Сначала установите эти npm в свой проект

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

затем включите это в файл angularcli.json

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

то в файле ts, где вы хотите сгенерировать PDF, вы должны использовать

declare var jspdf;

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

  // Only pt supported (not mm or in)
  var doc = new jsPDF('p', 'pt');
  doc.autoTable(columns, rows);
  doc.save('table.pdf');
}

Ответ 4

Старый вопрос, но это альтернативное решение, которое я встал и работал в своем угловом приложении. Я закончил тем, что модифицировал это решение jsPDF для работы без использования ИИО/кордовой клавиатуры.

npm install jspdf --save
npm install @types/jspdf --save
npm install html2canvas --save
npm install @types/html2canvas --save

Добавьте идентификатор к тому, что div содержит контент, который вы хотите создать PDF

<div id="html2Pdf">your content here</div>

Импорт библиотек

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

Добавить метод создания PDF файла

generatePdf() {
    const div = document.getElementById("html2Pdf");
    const options = {background: "white", height: div.clientHeight, width: div.clientWidth};

    html2canvas(div, options).then((canvas) => {
        //Initialize JSPDF
        let doc = new jsPDF("p", "mm", "a4");
        //Converting canvas to Image
        let imgData = canvas.toDataURL("image/PNG");
        //Add image Canvas to PDF
        doc.addImage(imgData, 'PNG', 20, 20);

        let pdfOutput = doc.output();
        // using ArrayBuffer will allow you to put image inside PDF
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (let i = 0; i < pdfOutput.length; i++) {
            array[i] = pdfOutput.charCodeAt(i);
        }

        //Name of pdf
        const fileName = "example.pdf";

        // Make file
        doc.save(fileName);

    });
}

Я нашел, что это решение хорошо работает для моего веб-приложения, и было полезно, поскольку у меня есть контроль над тем, когда я хочу сгенерировать PDF (после получения данных асинхронно). Кроме того, мне не нужно было устанавливать какие-либо библиотеки по всему миру.