jsPDF,生成pdf文件的助手

最新推荐文章于 2024-08-02 20:49:23 发布
最新推荐文章于 2024-08-02 20:49:23 发布
阅读量4.3k 收藏 3
点赞数 2
分类专栏： 笔记 文章标签： jspdf 插件 pdf 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33847794/article/details/77941075
版权

jsPDF是一个强大的基于HTML5的PDF生成工具，许多公司需要用它来生成pdf报表。

我也是昨天才了解到它，所以我对于jspdf也是一知半解，在这里我归纳两种我觉得比较实用的生成方法。

链接地址http://mrrio.github.io/

首先，你必须得拥有这个插件


这是练习这个功能所需要的js文件，但是我所归纳的两种只需要以下三种

最低0.47元/天 解锁文章
BestFIzz
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用jsPDF生成PDF文件
WeiLanShun_CSND的博客
09-09 4356
使用两个开源项目，这是他们的地址 jsPDF：https://github.com/MrRio/jsPDF jsPDF-AutoTable：https://github.com/simonbengtsson/jsPDF-AutoTable 项目引入，我使用的版本是jsPDF（1.5.3）、jsPDF-AutoTable（3.2.4） <script src="libs/jspdf.deb...
jspdf 生成pdf文件_使用jsPDF快速从网页生成PDF
culi3182的博客
08-25 3203
jspdf 生成pdf文件The Portable Document Format has been one the major innovations in the fields of desktop publishing and office automations. 可移植文档格式已成为桌面出版和办公室自动化领域的主要创新之一。 It’s widely used in web publi...
jspdf 生成PDF
EmotionComputer
11-27 355
jsPDF
纯JS将HTML生成pdf
mqiqe的专栏
06-27 946
该方案使用纯js脚本将页面html内容转换成pdf。
jspdf导出PDF文件
高晨辉的博客
11-17 1703
pdf导出
html2Canvas+JsPDF生成pdf文件并下载
风如白话的博客
01-06 1428
采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载 1、安装html2Canvas: npm install html2canvas 2、安装JsPDF： npm install jspdf /** * 生成PDF格式文件并下载 * @param {*} el 页面元素名 * @param {*} title 文件名称 * @returns */ export function generatePdf(el, { title = '' }) { retur
jsPDF生成pdf文件
super的博客
12-04 8963
需求：前端从服务器获取图片信息，然后将图片插入到pdf中并下载 使用的是jsPDF.js  官方文档地址：https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html#~addImage 需要解释的是myloadImageFile 这个方法，这个是jsPDF提供的一个方法，但是他的if判断如果有跨域请求就不去获取文件了 因为我...
将jsPDF生成的PDF文件上传至服务器
weixin_43993121的博客
03-08 1423
需求：将jsPDF生成的文件，转成file文件，再上传至服务器 putFile(PDF, fileName) { // 用于测试 PDF.save(`${fileName}.pdf`) let file = this.convertBase64ToFile(PDF.output("dataurlstring"), fileName); putFileAttach({ file, attachType: 'report_uploa
使用jspdf将html页面生成pdf文件
m0_68937827的博客
06-06 692
/ name：保存的文件名称；this.$refs.outputReportPDF：要输出成pdf的总模块；this.$refs.outputReportPDFItem：总模块中的每个item,用于判断是否需要在换页时加个空白框隔开。// 等最后一张图片在页面中加在完再输出成pdf，要不然pdf文件里的图片会不显示。2、在utils文件夹下创建一个单独的文件（名字无具体要求）// el-image加在完图片时触发。1、下载jspdf插件包。// 引入刚才创建的文件。'从后端获取到的数据'
jsPDF生成PDF文件，文件不全问题，后台进行文件下载，前台不下载
zhang_kang_user的博客
12-11 7382
我是前端使用jsPDF进行生成PDF文件，使用Base64进行加密，解密；后台进行文件流下载 1.前端使用jsPDF和html2canvas进行生成PDF文件（当然有这同样的毛病，生成时候有滚动条的情况下，内容会丢失，我这里使用的是网上很多人的一种思路，把要进行生成的标签，进行复制一份，对这个复制了的对象进行操作，就不会丢失内容了。并且，这里没有让用户在前台页面进行下载，这里是直接进行传递到后台...
前端使用jspdf生成PDF通过ajax传输后台生成PDF文件
热门推荐
csl125的博客
12-22 2万+
html需要引入 html2canvas.js 和jspdf.debug.js  &lt;script src="static/libs/jsPDF-master/dist/jspdf.min.js"&gt;&lt;/script&gt; &lt;script src="static/libs/jsPDF-master/dist/html2canvas.js"&gt;&lt;/script&g...
使用jspdf生成pdf报表
12-08
首先，jspdf是一个JavaScript库，允许开发者在浏览器端生成PDF文件。它支持基本的HTML元素转换，但对HTML样式和某些特定元素（如SVG）的支持有限。因此，要将动态生成的HTML报表转化为PDF，我们需要额外的工具和技术...
phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)
09-04
在本文中，我们将探讨如何在PhoneGap应用中使用JSPDF库生成PDF文件。PhoneGap是一种允许开发者使用HTML、CSS和JavaScript构建跨平台原生移动应用的框架。JSPDF则是一个纯JavaScript库，用于在浏览器环境中生成PDF...
使用jspdf打印pdf 支持分页
04-02
`jspdf`库是一个非常实用的JavaScript库，专门用于在浏览器端生成PDF文件。这个教程将详细介绍如何使用`jspdf`来实现HTML到PDF的转换，并支持分页功能。 首先，`jspdf`库的核心功能是提供了一个在浏览器环境中创建...
原生js实现生成PDF文件
04-25
原生js实现生成PDF文件 生成文件保存文件 两个文件 第一个 html2canvas.min.js 主要是实现将选择的元素转换成图片 第二个 jspdf.min.js 主要是实现生成PDF的主要文件 引入 ...
jsPDF生成pdf后在网页展示实例.docx
01-20
- **使用jspdf生成PDF报表**：利用jsPDF可以创建各种报表，如订单、发票等，结合实际业务数据生成定制化的PDF文件。 - **phonegap教程**：在PhoneGap应用中使用jsPDF库，可以在离线环境中生成PDF文件。 - **JS导出...
marker - PDF 转 markdown
编码时光
08-02 608
一、关于 marker 特点 它是如何工作的 例子 性能 商业用途 托管API 限制 二、安装 Optional: OCRMyPDF 三、用法 配置 转换单个文件 转换多个文件 在多个GPU上转换多个文件 三、故障排除 四、有用的设置 五、基准测试 速度 精度 吞吐量 六、运行自己的基准测试 七、感谢
PDF发票解析并将信息回填到前端（1）后端解析PDF
weixin_43866613的博客
08-02 278
本文主要是实现提取发票中的部分内容，并实现自动回填到页面中对应位置。因为没有操作数据库，所以没有使用到mapper层。新建一个Springboot项目。
PDF文件点击打印无反应？是何原因造成能解决吗？
最新发布
pf_data的博客
08-02 157
一般情况下，PDF文件是可以打印的，如果PDF文件打开之后发现文件不能打印，我们需要先查看一下自己的打印机是否能够正常运行，如果打印机是正常的，我们再查看一下，文件中的打印功能按钮是否是灰色的状态。如果PDF中的大多数功能按钮以及打印按钮都是灰色的状态，那就证明是文件的问题导致不能打印的。在电脑上下载安装好PassFab for PDF工具，然后打开软件，点击右侧的移除PDF编辑限制，导入带有编辑限制的PDF文件，点击移除，稍等片刻，便可移除PDF文件的编辑限制。，将权限状态修改为【
jspdf生成pdf时 中文乱码
06-08
在使用jspdf生成pdf时，中文乱码的问题通常是因为jspdf默认字体是Helvetica，而该字体不支持中文字符。解决方法如下： 1. 引入支持中文字符的字体库，如：`STSongStd-Light`、`SimSun`、`SimHei`等。可以从网络上下载相应的字体库，然后将字体文件放到项目中。 2. 在jspdf中设置中文字体，如下所示： ```js var doc = new jsPDF(); doc.addFont('path/to/font/file.ttf', 'fontName', 'normal'); doc.setFont('fontName'); doc.text('中文', 10, 10); ``` 其中，`addFont()`方法用于添加字体文件，`setFont()`方法用于设置字体，`text()`方法用于输出文本。 3. 如果使用了html2canvas将html转成canvas，再使用jspdf将canvas转成pdf，可以在html2canvas的配置中设置中文字体，如下所示： ```js html2canvas(document.body, { useCORS: true, scale: 2, logging: true, letterRendering: 1, allowTaint: false, foreignObjectRendering: true, async: false, fonts: [ { family: 'fontName', src: 'url(path/to/font/file.ttf)' } ] }).then(function(canvas) { var imgData = canvas.toDataURL('image/png'); var doc = new jsPDF(); doc.addImage(imgData, 'PNG', 0, 0, 210, 297); doc.save('test.pdf'); }); ``` 其中，`fonts`属性用于设置字体，`family`属性用于设置字体名称，`src`属性用于设置字体文件路径。 通过以上步骤，即可解决jspdf生成pdf时中文乱码的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值