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的图片懒加载js
Jun 30 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
详解jQuery事件
Jan 13 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
react基本安装与测试示例
Apr 27 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php 301转向实现代码
2008/09/18 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python装饰器用法实例总结
2018/05/26 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
采购部长岗位职责
2014/06/13 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
鼋头渚导游词
2015/02/05 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书