纯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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
ext form 表单提交数据的方法小结
Aug 08 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Vue-Router的使用方法
Sep 05 Javascript
JavaScript实现切换多张图片
Jan 27 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
详解VUE调用本地json的使用方法
2019/05/15 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
编程语言Python的发展史
2014/09/26 Python
Python实现的ini文件操作类分享
2014/11/20 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python 控制终端输出文字的实例
2019/07/12 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python3中for循环踩过的坑记录
2020/12/14 Python
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
毕业生就业自荐书
2013/12/15 职场文书
总账会计岗位职责
2014/03/13 职场文书
企业指导教师评语
2014/04/28 职场文书
工作时间调整通知
2015/04/24 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python