Angular2 - Create PDF from HTML using jspdf

Question

For the project I'm working on, I need to be able to generate the PDF of the page that the user is currently on, for which I will use jspdf. Since I have HTML- addHTML()with which I need to create a PDF file, I will need addHTML(). There are many topics about this, saying

You will need to either use html2canvaseither rasterizehtml.

I decided to use html2canvas. Here's 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:

: . /AppComponent AppComponent - : 3: 4, : https://github.com/niklasvh/html2canvas, https://github.com/cburgmer/rasterizeHTML.js

? canvas , , html2canvas.

Answer 1

, , :

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

index.html(, - ).

:

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

html2canvas .
:

import * as html2canvas from 'html2canvas';

Answer 2

, - cdn () , Angular 6:

cdn ( , )

, , , , jsPDF Angular 6 ( )

cmds:

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>

:

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

Answer 3

:

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

Answer 4

, html div pdf, html2pdf, , .

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