纯js实现html转pdf的简单实例(推荐)


Posted in Javascript onFebruary 16, 2017

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。

简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。

咋不上天呢……

查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种:

1、大部分浏览器就有这个功能。然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass。

2、利用第三方工具。我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试了一下,效果不好,而且对svg图片的支持也不行。pass。

3、还有一种是利用iText类后台生成java文件。但因为需要导出的这个页面是动态页面,而且直接把页面传给后台会丢失大量样式,所以还是pass。

最后没什么好的办法,只能退而求其次,想着要不先把html页面转成图片,再把图片导出为pdf。因为要支持用户导出下载,而且要保留样式,所以最好是纯js前端实现。

html转canvas的话,就用html2canvas这个js,这个网上介绍比较多了,这里就不废话了。

比较麻烦的是svg图片,直接用html2canvas无法把svg标签的内容转成canvas,最后查了一圈资料后,锁定了canvg这个js。canvg是谷歌的一个插件,可以将svg标签内容转成canvas。具体到我们的项目,还有一个难点,就是如何把glyphicons这种字体图标也转成canvas,因为在不同浏览器下对这种字体图标的支持是完全不一样的。最后找到的方法是用char code来替换这些字体图标,重新绘制成canvas。由canvas生成图片不用废话。由图片生成pdf用jsPDF实现。 折腾了大半天,总算把整个流程打通了,接下来一步一步贴上代码。

第一步:把对应dom节点里所有的svg元素替换成canvas

svg2canvas: function(targetElem) {
 var svgElem = targetElem.find('svg');
 svgElem.each(function(index, node) {
  var parentNode = node.parentNode;
  //由于现在的IE不支持直接对svg标签node取内容,所以需要在当前标签外面套一层div,通过外层div的innerHTML属性来获取
  var tempNode = document.createElement('div');
  tempNode.appendChild(node);
  var svg = tempNode.innerHTML;
  var canvas = document.createElement('canvas');
  //转换
  canvg(canvas, svg);
  parentNode.appendChild(canvas);
 });
}

第二步:把glyphicons字体转成canvas。如果项目中没有用到glyphicons字体图标,可忽略这一步

glyphicons2canvas: function(targetElem, fontClassName, fontFamilyName) {
 var iconElems = targetElem.find('.' + fontClassName);
 iconElems.each(function(index, inconNode) {
  var fontSize = $(inconNode).css("font-size");
  var iconColor = $(inconNode).css("color");
  var styleContent = $(inconNode).attr('style');
  //去掉"px"
  fontSize = fontSize.replace("px", "");
  var charCode = getCharCodeByGlyphiconsName(iconName);
  var myCanvas = document.createElement('canvas');
  //把canva宽高各增加2是为了显示图标完整
  myCanvas.width = parseInt(fontSize) + 2;
  myCanvas.height = parseInt(fontSize) + 2;
  myCanvas.style = styleContent;
  var ctx = myCanvas.getContext('2d');
  //设置绘图内容的颜色
  ctx.fillStyle = iconColor;
  //设置绘图的字体大小以及font-family的名字
  ctx.font = fontSize + 'px ' + fontFamilyName;
  ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) + 1);
  $(inconNode).replaceWith(myCanvas);
 });
}
//根据glyphicons/glyphicon图标的类名获取到对应的char code
getCharCodeByGlyphiconsName: function(iconName) {
 switch (iconName) {
 case("glyphicons-resize-full"):
  return "0xE216";
 case ("glyphicons-chevron-left"):
  return "0xE225";
 default:
  return "";
 }
}

第三步:html转canvas转图片再转pdf

html2canvas($("#myExportArea"), {
 onrendered: function(canvas) {
  var imgData = canvas.toDataURL('image/jpeg');
  var img = new Image();
  img.src = imgData;
  //根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.225是因为比例问题
  img.onload = function() {
   //此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
   if (this.width > this.height) {
    var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
   } else {
    var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
   }
   doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
   //根据下载保存成不同的文件名
   doc.save('report_pdf_' + new Date().getTime() + '.pdf');
  }
 },
 background: "#fff",
 //这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
 allowTaint: true //避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
});

虽然最后勉强完成了客户的要求,但是生成的pdf效果明显不如正常截图来的清晰……水平所限,暂时只能想到这种方法,如果大家有更好的办法,欢迎指点。

以上这篇纯js实现html转pdf的简单实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
js对象的复制继承实例
Jan 10 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
You might like
php实现可运算的验证码
2015/11/10 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
有关Python的22个编程技巧
2018/08/29 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python调用摄像头的示例代码
2020/09/28 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
《开国大典》教学反思
2014/04/19 职场文书
地震慰问信
2015/02/14 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
春风化雨观后感
2015/06/11 职场文书