如何在 Angular2 中将 HTML 转换为 pdf?

2024-01-30

我需要将动态生成的 html 表转换为 pdf 并能够打印它。我需要它在 angular2 和 Typescript 中完成。


JSPDF 适用于 Angular 2。您需要从 dt~ 下载定义。 将库导入为:

import * as jsPDF from "jspdf";
.
.
.

let doc = new jsPDF();

// Add a title to your PDF
doc.setFontSize(30); 
doc.text(12, 10, "Your Title");

// Create your table here (The dynamic table needs to be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable")[0];
html2canvas(element)
.then((canvas: any) => {
    doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, doc.internal.pageSize.width, element.offsetHeight / 5 );
    doc.save(`Report-${Date.now()}.pdf`);
})

在 system.js 的地图部分中添加以下行:

"jspdf": "<myLibs>/jspdf.js",
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular2 中将 HTML 转换为 pdf? 的相关文章

  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • TypeScript 中的类型安全谓词函数

    我的目标是编写谓词函数 isNull and isUndefined例如 在 TypeScript 中满足以下条件 可以独立使用 array filter isNull 可以逻辑组合 array filter and not isNull
  • 如何在 chromedriver 2.15 中打开 pdf 而无需下载

    我最近升级到 Chromedriver 2 15 现在 当我单击 pdf 文件的链接时 它会自动下载 而不是像以前那样显示在新选项卡中 a target blank href my pdf file pdf My PDF File a 有没
  • 无法重新加载/刷新活动路线

    我最近更新了新的 RC3 和 Router3alpha 似乎有些事情发生了变化 我注意到单击活动路径的链接不再导致组件重新加载 如何使用新的 router3 实现此行为 我的链接看起来像 a Link1 a 为了测试我只是在 ngOnIni
  • Angular 2 中的变更检测

    我正在将角度 1 和角度 2 集成在一起 因此我有角度 1 控制器和服务以及角度 2 组件 这些对于数据检索和存储来说工作得很好 反之亦然 下面是我的 html 页面 h3 Angular 1 service h3 div div
  • 如何使用带有 python 的报告实验室将 html 文档转换为 pdf

    我正在尝试使用报告实验室将我创建的 html 文档转换为 pdf html 文档如下 我不确定如何做到这一点 我在网上查看过 似乎找不到解决方案 html文档 h2 Convert to pdf h2 p Lorem ipsum dolor
  • 根据 main.ts 中的 URL 引导多个或单个模块

    我正在使用一个 NET Framework MVC Web项目 该项目无法完全转移到完整的角度项目 因此我无法使用角度的路由来延迟加载 但我也不想加载使用角度组件的所有内容 这是一个企业解决方案 要说 嘿 让我们充分利用 Angular 并
  • tsconfig.json 中模块类型的区别

    在 tsconfig json 中 compilerOptions target es5 module commonjs moduleResolution node sourceMap true emitDecoratorMetadata
  • 在 .NET Core 中为 SPA 生成角度包时如何解决错误失败?

    当我执行该应用程序时 我收到两个红色失败消息 如下所示 通常 当类型或其他方面出现错误时 失败 Microsoft AspNetCore SpaServices 0 生成浏览器应用程序包 失败 Microsoft AspNetCore Sp
  • 如何循环 Record

    I have Records类型Record https www typescriptlang org docs handbook utility types html recordkt export interface List name
  • Angular 2获取元素高度

    我这里有一个非常简单的例子 它只是一个带有单个 div 的角度应用程序 是否可以获取div的角度高度 我想我可以用 ViewChild 和 offsetHeight 来做到这一点 import Component ElementRef Vi
  • BrowserModule 和 platformBrowserDynamic 有什么区别?

    这两个模块的用途是什么 import BrowserModule from angular platform browser import platformBrowserDynamic from angular platform brows
  • Mat-tree 创建一棵树,其中包含要显示的值和 id

    我正在学习如何按照文档使用 mat tree 但现在我需要使用一个数据源树 其中不仅定义了字符串 因为当我单击一个节点时 我需要知道它的 id 这是我项目的 stackblitz https stackblitz com edit angu
  • React-TypeScript:类型“IntrinsicAttributes & IntrinsicClassAttributes”上不存在属性“位置”

    我正在学习 React typescript 我正在使用反应谷歌地图来显示我的区域 我成功地显示了地图 当我尝试使用react google map中的标记来指出我的区域并定位我的纬度和经度时 我收到打字稿错误 Property posit
  • Angular 2 验证状态

    我使用 Angular 2 实现了一个登录页面 登录后 我从服务器获取 jsonwebtoken userId userRole userName 我将此信息存储在本地存储中 以便我可以随时访问它并在用户刷新页面时保持登录状态 AuthSe
  • React Native/TypeScript/测试库/Jest 的设置不起作用

    我正在尝试设置一个 React Native TypeScript 应用程序以使用 Jest 进行测试和 testing library react native 到目前为止我收到这个错误 Warning React createEleme
  • 用输入字段 Javascript/Angular2 替换某些单词

    我有一根绳子 我喜欢橙色 蓝色 黑色 粉色 玫瑰色 黄色 白色 黑色 是否可以用输入字段替换黄色和黑色 以便我可以输入自己的颜色 const a string I like orange blue black pink rose yello
  • cordova-plugin-geolocation watchPosition() 方法不起作用

    我正在开发 Ionic2 Angular2 Typescript 应用程序 我正在尝试使用 Cordova 的 Geolocation 插件 但是当我像这样调用 watchPosition 方法时http ionicframework co
  • 当可观察值可用时,UI 不会自动更新

    在 angular2 中 我创建了可观察的 uploadProgressStatus 它接受数字 使用异步管道 我想在 UI 上显示数字 并在输入新值时自动更新 请参阅下面的代码 home component ts 正在观察 upload
  • XOR或其他简单的文件混淆方法ios目标c

    我正在开发一个使用受版权保护的 pdf 文件的 ios 应用程序 我正在寻找一些简单的方法来混淆文件以确保安全 这些方法不需要我经历额外的大众市场 CCATS 加密审查流程 但也将确保版权所有者已尽我所能来保证他们的数据安全 当然 我用密码

随机推荐

  • PL/SQL 存储过程输出游标到 VBA ADODB.RecordSet?

    在这篇文章的序言中 我想说我对 Excel 2007 vba 宏相当陌生 我正在尝试调用一个以游标作为输出参数的 Oracle PL SQL 存储过程 程序规范如下所示 PROCEDURE get product out cur data
  • 如何为 Azure Functions v3 配置 swagger ui 页面?

    我使用以下命令将 OpenApi 支持添加到 Azure 函数应用程序 v3 ConfigureOpenApi in Program Main 我对特定功能使用函数装饰 但如何控制 api swagger ui 上显示的通用 API 名称
  • httplib2 安装时权限被拒绝

    我正在尝试安装适用于 Python 的 httplib2 库 以便我可以使用它与 Twitter 进行交互 但当我尝试通过 python setup py install 进行安装时 我在控制台中收到以下错误 这是一个新的 MBA 我是唯一
  • 在 Node.Js Express 中,“res.render”是否结束 http 请求?

    因此 只有在确定一切都已完成时才执行 res render 对吗 因为它结束了请求并弹出了一个网页 如果您不提供回调res render view options fn 它会自动给出 200 HTTP Status 和 Content Ty
  • “快速路径”无竞争同步是什么意思?

    来自性能和可扩展性的章节JCIP书籍 http jcip net s3 website us east 1 amazonaws com 同步机制针对无竞争的情况进行了优化 case 易失性始终是无争议的 在撰写本文时 快速路径 无竞争同步范
  • 撤消 git 过滤分支

    我不小心使用 git filter branch 从我的存储库中删除了一个文件 git filter branch f index filter git rm cached ignore unmatch images thumb a JPG
  • 在编译时生成唯一的数字

    我想为标题中的每个类生成唯一的数字 在我的例子中为素数 但我们可以说这应该只是连续的数字 即 1 2 3 4 等 当然我可以对这些进行硬编码 struct A enum ID 1 struct B enum ID 2 struct C en
  • 使用 React Navigation,如何强制抽屉导航器弹出到堆栈顶部?

    我正在使用 React Navigation 并有一个抽屉式导航器 其中包含多个 Stack Navigator 作为其项目 当我打开抽屉导航器并单击某个项目时 它会显示我单击的堆栈中的第一个屏幕 当我转到堆栈中的第二个屏幕 然后打开抽屉并
  • JS:查找对象数组中的最大数字

    找到对象数组中最大数字并返回该对象的最简单方法是什么 var arr num 0 5 num 1 num 0 35 尝试使用 forEach 但除了存储每个数字并比较它们之外无法找到一种方法来做到这一点 任何帮助表示赞赏 提前致谢 redu
  • 尝试了解 Latex、Sweave 和 R 之间的工作流程

    假设我编写了以下小 Rnw 文件 documentclass article usepackage utf8 inputenc usepackage Sweave usepackage tikz usepackage pgf begin d
  • SVG 过滤器无法正常工作直线[重复]

    这个问题在这里已经有答案了
  • Visual Studio 不显示打字稿错误

    我遇到了奇怪的问题 我已经安装了 VS2013 和 typescript 当我点击保存按钮时 ts文件 调用 ts 编译器 但 VS 没有显示任何 ts 错误 如果编译器失败我只会收到一条消息 Input file contained se
  • IronRouter 上的上一页位置

    在 IronRouter 中 有没有办法在转到下一页之前获取上一页位置 我可以使用一个事件来获取此信息吗 提前致谢 由于 Iron Router 使用常用的 History API 因此您可以使用普通的 JS 方法 history go 1
  • 动态类型测试未按预期工作

    这是一个SSCCE http sscce org 我有一个地图容器类 其中内部Map是根据需要创建的set被调用的方法 flow use strict class MapContainer map Map
  • Python 跨不同类的 asyncio.Event()

    我正在编写一个 Python 程序来与基于 CAN 总线的设备进行交互 我正在成功使用 python can 模块来实现此目的 我还使用 asyncio 来响应异步事件 我编写了一个由 CanBusSequencer 类使用的 CanBus
  • .NET Compact Framework 能否获得单元格中包含多行文本的网格?

    是否可以使用 NET Compact 框架在网格单元中显示多行文本 我们需要创建一个网格 其中中间列包含一个地址 我们希望通过多行来显示这一点 并 可能 对最后一行应用一些格式 e g 123 任意街伯明翰 B1 2DU tel 0123
  • PhantomJS 不支持 Javascript 国际化 API

    我有一系列Jasmine针对运行的测试AngularJs使用 ECMAScript 国际化 API 的服务 当我通过 Chrome 运行它们时 它们都运行成功 但是 当我使用PhantomJS通过 Maven 运行它们 它们看起来都失败了P
  • T4 报告编译转换:类、结构中的标记“this”无效

    尝试运行 T4 模板不可变对象图 https github com AArnott ImmutableObjectGraph给出的错误为 Error 5 Compiling transformation Invalid token this
  • 使用 minicolors jquery

    我一直在尝试实施迷你颜色 http www abeautifulsite net blog 2011 02 jquery minicolors a color selector for input controls 一切都很好 我已经按照我
  • 如何在 Angular2 中将 HTML 转换为 pdf?

    我需要将动态生成的 html 表转换为 pdf 并能够打印它 我需要它在 angular2 和 Typescript 中完成 JSPDF 适用于 Angular 2 您需要从 dt 下载定义 将库导入为 import as jsPDF fr