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

Posted 2023-03-13

【中文标题】使用 angular2/typescript 从 html 生成 PDF 文件

【英文标题】：Generate PDF file from html using angular2/typescript

【发布时间】：2016-12-24 02:18:45

【问题描述】：

我想提取我的 html 模板的一部分并将其转换为 PDF 文件，以便用户可以选择下载它。 （例如，在他们单击按钮之后）。

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

谢谢

【参考方案1】：

为什么使用定义（也称为声明）文件？

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

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

如何使用

您可以下载一个名为 typings 的 npm 包，这将有助于加快进程。 Here's 关于如何使用它的简短指南。一旦你安装了类型，你可以运行：

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

获取可以在项目中使用的类型文件。

【讨论】：

嘿 Scrambo，我完全做到了这一点。但由于某种原因，它不能专门用于 jspdf（我之前已经做过了）。我能注意到的原因是，由于某种原因，import 语句试图从 node_modules 依赖项中获取模块，而不是从全局类型中声明的 index.d.t 中获取模块。然后我得到消息（在浏览器控制台中）：错误：TypeError：AMD模块localhost:5555/node_modules/jspdf/dist/jspdf.min.js没有定义（...）

【参考方案2】：

如果您想在生产中使用它，您绝对不想依赖 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');
...

【讨论】：

我觉得在angular中我应该可以使用组件模板。有没有一种简单的方法可以将已经构建和样式化的模板转换为 jsPDF 方法？

我最终使用了这个...查看源代码：cdn.rawgit.com/MrRio/jsPDF/master/examples/html2pdf/…

【参考方案3】：

AddHtml 方法已弃用：

来源： 插件/addhtml.js，第 12 行 已弃用： 这将替换为支持矢量的 API。 see here

将 HTML 元素渲染到添加到 PDF 中的画布对象

此功能需要html2canvas 或rasterizeHTML

【参考方案4】：

作为回应

此链接是导入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');