前端实现pdf转换成html,纯js实现HTML转pdf的简单实例(推荐)_温瞳_前端开发者

项目开发中遇到了一个变态需求，需要把一整个页面导出为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