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- 来自多个 divs（向导步骤）

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

3- 应该是高质量的（不是像素化的）

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

Answer 1

以下使用 jsPDF 库的 Angular 6 对我来说效果很好：

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

基于 & 因为我很难找到那个答案，我重新分享其中的内容并帮助我在 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，请随时分享它

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

Angular 6 saving material wizard data in pdf format on client side

javascript

angular

angular6