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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
js实现滚动条自动滚动
Dec 13 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js创建数组的简单方法
2016/07/27 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python设计模式之原型模式实例详解
2019/01/18 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
2014春晚主持词
2014/03/25 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
组织鉴定材料
2014/06/02 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
个人年终总结开头
2015/03/06 职场文书
教师研修随笔感言
2015/11/18 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript