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 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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
无线电的诞生过程
2021/03/01 无线电
PHP实现下载功能的代码
2012/09/29 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
详解php反序列化
2020/06/10 PHP
js正确获取元素样式详解
2009/08/07 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python 系统调用的实例详解
2017/07/11 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python 常见的排序算法实现汇总
2020/08/21 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
设计部经理的岗位职责
2013/11/16 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
小学思品教学反思
2016/02/20 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers