纯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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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加密解密函数分享
2014/06/05 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
Python日志模块logging简介
2015/04/13 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python中实现三目运算的方法
2015/06/21 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
对python中dict和json的区别详解
2018/12/18 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
一套英文Java笔试题面试题
2016/04/21 面试题
会计专业自我鉴定范文
2013/12/29 职场文书
高中生期末评语
2014/01/28 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
高中教师评语大全
2014/04/25 职场文书
机关作风建设工作总结
2014/10/23 职场文书
贷款担保书
2015/01/20 职场文书
警示教育观后感
2015/06/17 职场文书
三八节活动简报
2015/07/20 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
python not运算符的实例用法
2021/06/30 Python
Python获取字典中某个key的value
2022/04/13 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL