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

Question

我想从HTML模板中提取一部分，并将其转换为PDF文件，以便用户可以选择下载。（例如，单击按钮后）。

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

谢谢你

Answer 1

不推荐使用AddHtml方法:

来源：plugins/addhtml.js，第 12 行 已弃用：这正在被支持矢量的 API 所取代。看这里

将HTML元素呈现到画布对象，该对象添加到PDF中

此功能需要 html2canvas 或 rasterizeHTML

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

}

Answer 3

如果你想在生产中使用它，你肯定不想依赖索引中引用的互联网链接。html，就像@khalil_diouri提议的那样。

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

npm install --save jspdf

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

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

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

npm安装类型--全局

安装定义文件:

< code >键入安装dt~jspdf - global - save

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

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