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

我想把HTML模板的一部分转换成PDF文件，让用户可以选择下载它。（例如，单击按钮后）

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

谢谢你的回复

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

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

//使用jsPDF注册pdf文件

然后在你的组件中

你这么做

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

}

declare-let-jsPDF；
@组成部分({
模板：`
下载
`
})
出口类文件组{
构造函数（）{
}
公开下载（）{
var doc=new jsPDF（）；
doc.text（20，20，“你好，世界！”）；
text（20，30，'这是客户端Javascript，输出PDF'）；
doc.addPage（）；
文本（20，20，‘你喜欢吗？’）；
//保存PDF
doc.save（'Test.pdf'）；
}
}

为什么要使用定义（也称为声明）文件？ 要将外部javascript库（例如jsPDF）用于Angular2应用程序（使用Typescript），您需要这些javascript库的类型定义文件。这些文件向typescript提供类型信息（如

String

、

Number

、

boolean

等），以帮助进行编译时类型检查。（因为javascript是松散类型的）

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

如何使用 您可以下载名为

typings

的npm软件包，这将有助于加快流程。关于如何使用它的简短指南。安装打字后，您可以运行：

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

---

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

如果您想在生产中使用它，您肯定不想依赖index.html中引用的internet链接，就像@khalil_diouri建议的那样

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

npm安装--保存jspdf

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

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

安装定义包：（如果未安装）

npm安装打字--全局

安装定义文件：

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

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

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

---

不推荐使用AddHtml方法：

资料来源： plugins/addhtml.js，第12行 不赞成： 这将被支持向量的API所取代

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

---

这项功能需要或

嘿，Scrambo，我就是这么做的。但由于某些原因，它并不是专门用于jspdf的（我以前使用过矩）。我注意到的原因是，出于某种原因，import语句试图从node_modules依赖项获取模块，而不是从typings global中声明的index.d.t获取模块。然后我得到消息（在浏览器控制台中）：Error:TypeError:AMD模块没有定义（…），我觉得在angular中，我应该能够使用组件模板。有没有一种简单的方法可以将已经构建和样式化的模板转换为jsPDF方法？我最终使用了这个。。。查看来源：