jsPDF(高清),html导出多页pdf(分享)
前言
遇到在html导出PDF的需求,在csdn找了很多关于PDF导出功能的文章,介绍了jsPDF、iText和wkhtmltopdf三种方式。
其中iText的使用对于中文还需要导入特定字体包,wkhtmltopdf需要配置服务器环境,综合考虑,选择了最简单的jsPDF。
很多文章都说jsPDF内容模糊、导出效果失真。谷歌搜了挺久,后来看到这一篇文章:
[转](https://blog.csdn.net/qq_36706878/article/details/111289963)
需要添加canvas画布元素,以及设定对应的尺寸;其中html2canvas的属性dpi的赋值倒显得不是很要紧(注释后,几乎不影响清晰度)。
只截取封面做为对比,修改前效果:
新增canvas后:
首先,引入js包:
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
导出pdf函数代码如下:
//pdf
htmltopdf=function() {var element = $(".ui-pdf-content"); // 这个dom元素是要导出pdf的范围divvar w = element.width(); // 获得该容器的宽var h = element.height(); // 获得该容器的高var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");var abs = 0;var win_i = $(window).width(); // 获得当前可视窗口的宽度(不包含滚动条)var win_o = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)if(win_o>win_i){abs = (win_o - win_i)/2; // 获得滚动条长度的一半}canvas.width = w * 4; // 将画布宽&&高放大4倍canvas.height = h * 4;var context = canvas.getContext("2d");context.scale(4, 4);context.translate(-offsetLeft-abs,-offsetTop);//这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此translate的时候,要把这个差值去掉html2canvas(element, {allowTaint: true,taintTest: true,canvas: canvas,dpi: 172,//导出pdf清晰度onrendered: function(canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28;var imgHeight = 592.28/contentWidth * contentHeight;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', 'a4');//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围,无需分页if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else { // 分页while(leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeight;position -= 841.89;//避免添加空白页if(leftHeight > 0) {pdf.addPage();}}}pdf.save('能耗分析报告'+'.pdf');}});
}
样式细节:如果css采用的是transform: translateX(-50%)来实现水平居中(比如我这里封面上的方框,如下图红框所圈),会导致PDF每一页正中位置都有这个方框。
在这里我取消transform: translateX(-50%),用position: absolute的定位来代替,问题解决。
jsPDF(高清),html导出多页pdf(分享)相关推荐
- 注册造价工程师用书免费电子版_2019-2020造价工程师各科电子教材精讲高清课件拿来和大家免费分享.......
2019-2020造价工程师各科电子教材精讲高清课件拿来和大家免费分享.... 链接:https://pan.baidu.com/s/1bZp-lLNUcGYzSVbVZaJnew 提取码:6f8l ...
- python教程pdf-python基础教程[高清][中文第2版].pdf
您所在位置:网站首页 > 海量文档  > 计算机 > Python python基础教程[高清][中文第2版].pdf ...
- 怎样在Word中存储高清图,并输出PDF
在科研论文的写作中,我们往往需要保存高清的图片.现在记录下通用的流程与方法 首选我们不论用MATLAB作图还是matplotlib作图,最后都能保存为eps 格式. 有些期刊要求提交的格式是eps 格 ...
- 苹果原壁纸高清_第111期壁纸分享。
点击上方蓝字关注「北上壁纸」 喜欢记得关注与置顶我们哦. iPhone手机壁纸(苹果壁纸,安卓壁纸)全面屏壁纸高清图,2020好看的手机壁纸,情侣壁纸头像,最新,最近比较火的壁纸)保存方法:点击图片- ...
- vue导出多页PDF(html2Canvas + jsPdf)(PDF左右边距)
我的另一篇文章写了autoTable+jsPdf生成PDF 参考这里 1.将html转成图片canvas( scrollY: refDom.top, // 关键代码,截取长度 heig ...
- vue导出多页PDF截断问题
一.前言 个人网站上线了,欢迎大家访问 苏浩的个人博客 使用的第三方:html2canvas 和 jspdf 为了一劳永逸(更好的偷懒),做了一个简历修改的页面,将简历信息保存到数据库同时使用html ...
- 前端导出多页pdf 带目录 页眉 页脚及页码
前段时间公司发布新需求,要求用户点击按钮可以导出pdf或者html到本地,pdf中要包含可点击跳转的目录,要分页记录页码,还有页眉和页脚,和后台的小哥哥配合试了好多方法,最终完成的效果还不错,在这里做 ...
- 高清架构整洁之道PDF下载
架构整洁之道高清PDF下载,请扫描如下二维码,支付3元.并加微信,发给你.谢谢.
- Python-Pyecharts高清图片导出及在PPT中动态展示
目录 导出png格式图片 如何在PPT中展示pyecharts图片 pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echar ...
最新文章
- 2022-2028年中国电子陶瓷行业深度调研及投资前景预测报告
- urlrewrite使用小结
- Docker(十四):Docker:网络模式详解
- sor迭代法matlab实例,Jacobi G-S SOR迭代法在matlab中例子.pdf
- 在GridView中添加按钮后,如何触发按钮的各种事件?
- denied 虚拟机access_Windows 2008 R2 Administrator access denied解决办法
- 贾扬清演讲实录:一个AI开发者的奇幻漂流
- 运放电路分析_必看!运放电路PCB设计技巧
- 11.2.0.3.7 PSU补丁升级
- killall 引起应用程序挂起【原创】
- 2010——满地遍是网页防篡改和WAF
- 做VB的,经常注册和反注册OCX控件和DLL链
- GitHub排名第一!免费最”强“12306抢票神器,程序员再不用跪求加速包!
- 【从零开始学习Go语言】一.初识Go语言
- Java使用iText PDF按页(逐页、单页)拆分PDF
- oracle 12C 创建用户失败 解决方案
- IDEA 学生注册成功并使用一段时间,还要激活,并且提示No suitable licenses associated with account
- oeasy教您玩转vim - 59 - # 编辑总结
- 结对编程项目-四则运算阶段性总结
- ORB-SLAM3中遇到的坑
热门文章
- 阿里云视频点播接口开发
- 残差网络 ResNet(PyTorch)
- 第11章 受限玻尔兹曼机
- 熔化焊包括哪五种_常用的几种熔焊方法
- 3.40 OrCAD输出网表出现“Duplicate Pin Name”错误时应该怎么处理?OrCAD输出网表出现“Illegal character”错误时应该怎么处理?
- mysql启动失败 日志
- 月光宝盒之时间魔法--java时间的前生今世
- 大数据、云计算、人工智能、机器学习,数字经济时代必学
- java jaspersoft_java开源报表系统(Jaspersoft Studio)
- 购物车分店铺,全选,店铺全选,计算,增加商品,APP购物车,类似淘宝购物车