Angular2 - Generate pdf from HTML using jspdf

问题

For a project I'm working on I need to be able to generate a PDF of the page the user is currently on, for which I'll use jspdf. Since I have a HTML I need to generate a PDF with, I'll need the addHTML() function. There are a lot of topic about this, saying

You'll either need to use html2canvas or rasterizehtml.

I've chosen to use html2canvas. This is what my code looks like at the moment:

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

When this function is called, I get a console error:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:4 caused by: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

Why exactly is this? I give a canvas as parameter and it still says I need to use html2canvas.

回答1:

What I found worked was adding:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

to the index.html file (it could presumably be elsewhere).

I then used:

const elementToPrint = document.getElementById('foo'); //The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
    doc.save('web.pdf');
});

Which no longer uses html2canvas in the code.
You can then remove the following import:

import * as html2canvas from 'html2canvas';

回答2:

In case someone prefer not to use cdn scripts & would like to use a more (angular) way, this worked for me in Angular 6:

Using this way will give you better support & autocomplete in the editor & will help you avoid depending on cdn scripts (if you wanna avoid them, like me)

Based on the excellent answer here & since it was hard for me to find that answer, I am re-sharing what was stated in it & helped me use jsPDF in Angular 6 (all credit goes to the original author of this answer)

You should run these cmds:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add following in angular-cli.json:

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

html:

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

component 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');
    }
}

回答3:

Anyone still trying to convert an Html div to a pdf can opt to use html2pdf, with a couple of lines you can do everything with ease.

var element = document.getElementById('element-to-print');
html2pdf(element);

回答4:

Try it like this:

GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');    
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 10, 10, 580, 300);
        pdf.save('web.pdf');
      }
    });
  }

回答5:

Use this way stackblitz example

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


public downloadPDF() {
   const doc = new jsPDF();

   const specialElementHandlers = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const content = this.content.nativeElement;

   doc.fromHTML(content.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElementHandlers
   });

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

来源：https://stackoverflow.com/questions/43276882/angular2-generate-pdf-from-html-using-jspdf