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

I want to take a part of my HTML template and convert it to PDF file to give the user an option to download it. (After they click a button for example).

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

I found a library called jsPDF, how would I use jsPDF in an Angular2 app (RC4)?

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

thank you

谢谢

4 个解决方案

#1

If you want to use it in production, you definitely don't want to depend on an internet link being referenced in your index.html, like proposed by @khalil_diouri.

如果你想在生产中使用它，你绝对不希望依赖于你的index.html中引用的互联网链接，就像@khalil_diouri提出的那样。

So, to properly use it in an Angular2/Typescript environment, first install it from npm

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

npm install --save jspdf

npm install --save jspdf

If you are using SystemJS, map it in your config file

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

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

Install definition package: (if not installed)

安装定义包:(如果没有安装）

npm install typings --global

npm install typings --global

Install definition files:

安装定义文件：

typings install dt~jspdf --global --save

typings安装dt~jspdf --global --save

And, finally, import it in your component.ts file

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

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

#2

as a response

作为回应

this link is necessary to import jsPDF content

导入jsPDF内容需要此链接

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

then in you component.ts

然后在你的component.ts

you do that

你做吧

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

}

#3

the AddHtml method is deprecated :

不推荐使用AddHtml方法：

Source: plugins/addhtml.js, line 12 Deprecated: This is being replace with a vector-supporting API. see here

来源：plugins / addhtml.js，第12行不推荐使用：这正在替换为支持向量的API。看这里

Renders an HTML element to canvas object which added to the PDF

将HTML元素呈现给添加到PDF的画布对象

This feature requires html2canvas or rasterizeHTML

此功能需要html2canvas或rasterizeHTML

#4

Why use Definition (also known as Declaration) files?

To use external javascript libraries (jsPDF, for example) with Angular2 applications (which use Typescript) you are going to want Type Definition files for those javascript libraries. These files provide type information (as in String, Number, boolean, etc.) to typescript for help with compile time type checking. (Since javascript is loosely typed)

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

Another explanation about d.ts files can be found here.

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

How to use

You can download an npm package called typings which will help expedite the process. Here's a short guide on how to use it. Once you have typings installed, you can run:

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

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

to get the typings file which you can then use in your project.

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