项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。
简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。
咋不上天呢……
查了一下,能够实现
1、大部分浏览器就有这个功能。然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass。
2、利用第三方工具。我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试了一下,效果不好,而且对svg图片的支持也不行。pass。
3、还有一种是利用iText类后台生成java文件。但因为需要导出的这个页面是动态页面,而且直接把页面传给后台会丢失大量样式,所以还是pass。
最后没什么好的办法,只能退而求其次,想着要不先把
html转canvas的话,就用html2canvas这个
比较麻烦的是svg图片,直接用html2canvas无法把svg标签的内容转成canvas,最后查了一圈资料后,锁定了canvg这个
第一步:把对应dom节点里所有的svg元素替换成canvas
svg2canvas: function(targetElem) {
var svgElem = targetElem.find('svg');
svgElem.each(function(index,
第二步:把glyphicons字体转成canvas。如果项目中没有用到glyphicons字体图标,可忽略这一步
glyphicons2canva