纯js实现html转pdf

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

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