Angular2 - 使用jspdf從HTML生成pdf

對於我正在處理的項目，我需要能夠生成用戶當前正在使用的頁面的PDF，爲此我將使用jspdf。因爲我有一個HTML我需要生成一個PDF，我需要的addHTML()功能。這裏有很多話題，說Angular2 - 使用jspdf從HTML生成pdf

You'll either need to use html2canvas or rasterizehtml .

我選擇使用html2canvas。這是我的代碼看起來像此刻：

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

當這個函數被調用時，我得到一個控制檯錯誤：

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

到底爲什麼會這樣？我給了一個canvas作爲參數，它仍然說我需要使用html2canvas。

來源

2017-04-07 FlorisdG

你試過從html2canvas/dist/html2canvas.js中導入*作爲html2canvas嗎？ –

@SyedAliTaqi我想你的建議，但它拋出錯誤 – Vignesh

我找到什麼工作是添加：

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

來源

2017-04-13 18:08:51 Greg

將是很好，如果import語句工作。但是現在應該選擇這個作爲答案。 – Ceekay

@Greg，無需在index.html中導入腳本。我們能不能在那裏，你在代碼中使用html2canvas除了導入能夠做到負載html2canvas.js – Vignesh

？我收到錯誤您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js錯誤：您需要https://github.com/niklasvh/ html2canvas或https://github.com/cburgmer/rasterizeHTML.js在Object.e.API.addHTML –

試試這樣說：

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

來源

2017-11-29 12:38:14 ferralucho

任何人都仍在努力的HTML DIV轉換爲PDF格式可以選擇使用html2pdf，與一對夫婦的你可以輕鬆地做任何事情。

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

來源

2018-03-08 11:08:49

Angular2 - 使用jspdf從HTML生成pdf

回答

相關問題