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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
拖动时防止选中
Feb 03 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js实现表格单列按字母排序
Aug 12 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 MSSQL 存储过程的方法
2008/12/24 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python操作gmail实例
2015/01/14 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
化学专业毕业生求职信
2014/07/28 职场文书
小学优秀学生评语
2014/12/29 职场文书
亮剑观后感300字
2015/06/05 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python