Javascript实现html转pdf高清版(提高分辨率)


Posted in Javascript onFebruary 19, 2020

网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰,今天为大家介绍如何提高js实现html转pdf的清晰度

引入js文件

https://cdn.bootcss.com/jquery/3.4.1/jquery.js

https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js

https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js

注意事项:

1.生成的pdf中,dom元素间距异常;

2.提高分辨率后,生成的图片有偏差;

html语句:

<div id="demo">
 ...
</div>

JS代码:

download(){
 var element = $("#demo"); // 这个dom元素是要导出pdf的div容器
 var 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 * 2; // 将画布宽&&高放大两倍
 canvas.height = h * 2;
 var context = canvas.getContext("2d");
 context.scale(2, 2);
 context.translate(-offsetLeft-abs,-offsetTop); 
 // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此  
 // translate的时候,要把这个差值去掉
 html2canvas(element).then(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');  
 })
}

更多关于Javascript将html转成pdf的文章请大家点击下面的相关链接

Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
Javascript玩转继承(三)
May 08 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
新手简单了解vue
May 29 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 #Javascript
详解Vue 单文件组件的三种写法
Feb 19 #Javascript
vue中 v-for循环的用法详解
Feb 19 #Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 #Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 #Javascript
ES6中new Function()语法及应用实例分析
Feb 19 #Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 #Javascript
You might like
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
浅谈Python实现2种文件复制的方法
2018/01/19 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python字典改变value值方法总结
2019/06/21 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python 中@property的用法详解
2020/01/15 Python
Django xadmin安装及使用详解
2020/10/26 Python
副总经理工作职责
2013/11/28 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
教学器材管理制度
2014/01/26 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
离婚协议书范本
2015/01/26 职场文书
保送生自荐信范文
2015/03/26 职场文书
实习证明格式范文
2015/06/16 职场文书
2015中学学校工作总结
2015/07/20 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书