使用Angular2/TypeScript从HTML生成PDF文件

Question

我希望将HTML模板的一部分转换为PDF文件，以便用户可以选择下载（例如，在单击按钮后）。

我发现了一个名为jsPDF的库，我该如何在Angular2应用程序（RC4）中使用jsPDF？

谢谢

- khalil _diouri

Answer 1

如果您想在生产环境中使用它，肯定不希望依赖于在您的index.html中引用互联网链接，就像@khalil_diouri所建议的那样。

因此，要在Angular2/Typescript环境中正确使用它，请首先从npm安装

npm install --save jspdf

如果您正在使用SystemJS，请在配置文件中对其进行映射

map: {
    "jspdf": "node_modules/jspdf/dist/jspdf.min.js"
}

安装定义文件包：（如果尚未安装）

npm install typings --global

安装定义文件：

typings install dt~jspdf --global --save

最后，在您的component.ts文件中导入它。

import jsPDF from 'jspdf'
...
    let doc = new jsPDF();
    doc.text(20,20,'Hello world');
    doc.save('Test.pdf');
...

- crtormen

---

我认为在Angular中应该能够使用组件模板。是否有一种简单的方法将已构建和样式化的模板转换为jsPDF方法？ - Kirby

最终我使用了这个... view-source:https://cdn.rawgit.com/MrRio/jsPDF/master/examples/html2pdf/showcase_supported_html.html - Kirby

Answer 2

作为回应

这个链接是导入jsPDF内容所必需的

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file

然后在你的组件.ts文件中

你这样做

declare let jsPDF;

@Component({
    template: `
        <button
          (click)="download()">download
        </button>
        `
})

export class DocSection {


    constructor() {
    }

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

}

- khalil _diouri

Answer 3

该AddHtml方法已被弃用:

来源： 插件/addhtml.js，第12行 弃用： 此方法将被支持矢量的API所替代。 请参见此处

将HTML元素渲染为添加到PDF的画布对象

此功能需要html2canvas 或 rasterizeHTML

- Yassine CHABLI

Answer 4

为什么使用定义文件（也称声明文件）？

要在使用Typescript的Angular2应用程序中使用外部JavaScript库（例如jsPDF），您需要该JavaScript库的类型定义文件。这些文件提供类型信息（例如String、Number、boolean等）给Typescript，以帮助进行编译时类型检查。（因为JavaScript是弱类型语言）

关于d.ts文件的另一个解释可以在这里找到。

如何使用

您可以下载一个名为typings的npm包，它将有助于加快过程。这里是一个简短的使用指南。一旦安装了typings，您可以运行：

npm run -- typings install dt~jspdf --global --save

获取类型文件，然后在您的项目中使用。

- Scrambo

---

嘿Scrambo，我一开始就确切地做了这个。但因为某些原因它没有特别与jspdf一起工作（我之前已经用moment做过了）。我注意到的原因是，由于导入语句尝试从node_modules依赖项获取模块而不是从typings全局中声明的index.d.ts获取模块，所以我收到了消息（在浏览器控制台中）：Error: TypeError: AMD module http://localhost:5555/node_modules/jspdf/dist/jspdf.min.js did not define(…)。 - luis.mazoni