Angular2 - 使用 jspdf 从 HTML 生成 pdf-Java 学习之路

对于我正在处理的项目，我需要能够生成用户当前所在页面的 PDF，我将使用jspdf。由于我有HTML我需要生成 PDF，我需要addHTML()函数。关于这一点有很多话题，说

你需要使用html2canvas或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：./AppComponent 类 AppComponent 中的错误 - 内联 template:3:4 引起：您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js

这究竟是为什么？我给canvas作为参数，它仍然说我需要使用html2canvas。

4 回答

我发现的工作是添加：

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

回复于 2024-04-25T17:09:03+08:00

如果有人不想使用 cdn 脚本并且想要使用更多(有角度)的方式，这在 Angular 6 中对我有用：

使用这种方式将在编辑器中为您提供更好的支持和自动完成功能，并将帮助您避免依赖 cdn 脚本(如果您想避免它们，像我一样)

基于这里的答案很棒＆因为我很难找到答案，我是 re-sharing 其中所说的并帮助我在 Angular 6 中使用 jsPDF(所有功劳归于此答案的原作者)

你应该运行这些 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>

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

回复于 2024-04-25T17:09:03+08:00

4
任何仍然试图将 Html div 转换为 pdf 的人都可以选择使用HTML2PDF，只需几行就可以轻松完成所有操作。
```
var element = document.getElementById('element-to-print');
html2pdf(element);
```
回复于 2024-04-25T17:09:03+08:00

试试这样：

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

回复于 2024-04-25T17:09:03+08:00

Angular2 - 使用 jspdf 从 HTML 生成 pdf

4 回答

相关问题