Question

我想将我的HTML模板的一部分转换为PDF文件，以便用户可以选择下载它。（例如，他们点击按钮后）。

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

谢谢

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

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

然后在你的component.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');
    }

}

Answer 3

不推荐使用AddHtml方法：

来源： plugins / addhtml.js，第12行推荐使用：这正在被支持向量的API取代。 see here

将HTML元素呈现给添加到PDF

的画布对象

此功能需要html2canvas 或rasterizeHTML

Answer 4

为什么要使用Definition（也称为Declaration）文件？

要在Angular2应用程序（使用Typescript）中使用外部JavaScript库（例如jsPDF），您将需要这些javascript库的类型定义文件。这些文件提供类型信息（如String，Number，boolean等）到typescript以获取编译时类型检查的帮助。（因为javascript是松散的类型）

有关d.ts文件的另一种解释可以找到here。

如何使用

您可以下载名为typings的npm包，这将有助于加快流程。 Here's关于如何使用它的简短指南。安装打字后，您可以运行：

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

获取您可以在项目中使用的打字文件。

使用angular2 / typescript从html生成PDF文件

4 个答案:

为什么要使用Definition（也称为Declaration）文件？

如何使用