javascript - Angular 6 在客户端以 pdf 格式保存 Material 向导数据

Question

我正在尝试以 pdf 格式打印 Angular Material 向导中显示的信息，我尝试使用 jspdf 但它不起作用，它给出了这个错误:

You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

我使用的代码是:

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

我已经使用 npm 安装了 html2canvas，我正在将它导入到同一个 ts 文件中。

是什么导致了这个错误？

如果我在索引文件中包含这个脚本，上面的相同代码可以正常工作

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

但它以非常低的质量打印 pdf，就好像它使用了我正在捕获的 div 的像素化快照

有没有比 jsPdf 更适合这项任务的东西？因为我没有找到任何类似的库，所以我在 npm 上找到了一些用于 angularJS 但不是 angular2+ 的库，我正在搜索一些库以便我可以构建 pdf 文档:

1- 来自多个 div(向导步骤)

2- 制作一个包含向导信息的 pdf 客户端。

3- 应该是高质量的(不是像素化的)

Example for a good quality tool that I found only in AngularJS

Answer 1

以下使用 jsPDF 库在 Angular 6 中对我来说效果很好:

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

基于excellent answer here ＆由于我很难找到该答案，因此我将重新分享其中的内容并帮助我在 Angular 6 中使用 jsPDF(所有功劳归于该答案的原作者)

你应该运行这些命令:

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

使用上面的代码已经生成了高质量的 pdf，但是如果有人有更好的方法在 Angular 2+ 中从 html 创建 pdf，请随时分享