关于angular：使用angular2 / typescript从html生成PDF文件


Generate PDF file from html using angular2/typescript

我想使用我的HTML模板的一部分并将其转换为PDF文件，以使用户可以选择下载它。 (例如，在他们单击按钮之后)。

我找到了一个名为jsPDF的库，如何在Angular2应用(RC4)中使用jsPDF？

谢谢

如果要在生产中使用它，则绝对不希望像@khalil_diouri所建议的那样依赖index.html中引用的Internet链接。

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

安装

npm install --save jspdf

如果使用的是SystemJS，则将其映射到配置文件中

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

安装定义包：(如果未安装)

npm install typings --global

安装定义文件：

typings install dt~jspdf --global --save

最后，将其导入您的component.ts文件中。

1
2
3
4
5
6
import jsPDF from 'jspdf'
...
    let doc = new jsPDF();
    doc.text(20,20,'Hello world');
    doc.save('Test.pdf');
...
相关讨论

作为回应

此链接对于导入jsPDF内容是必需的

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

然后在您的component.ts

中

您这样做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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');
    }

}

不推荐使用AddHtml方法：

来源：
plugins / addhtml.js，第12行
不推荐使用：
这将被支持向量的API取代。见这里

将HTML元素呈现给添加到PDF

的画布对象

此功能需要html2canvas或rasterizeHTML

为什么要使用"定义"(也称为"声明")文件？

要在Angular2应用程序(使用Typescript)中使用外部javascript库(例如jsPDF)，您将需要这些javascript库的Type Definition文件。这些文件为typescript提供类型信息(如String，Number，boolean等)，以帮助进行编译时类型检查。 (由于javascript的类型是宽松的)

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

如何使用

您可以下载名为typings的npm软件包，这将有助于加快该过程。这是有关如何使用它的简短指南。一旦安装了键入内容，就可以运行：

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

获取打字文件，然后可以在项目中使用。

相关讨论