canvas节点无法导出图片_HTML转为PDF，图片导出失败的终极解决方案

如题项目有需求将一个页面导出为pdf,然而页面中的图片却始终无法导出成功

一、导出的方法

查询了许多大佬的帖子，找到了如下导出的方法

const PdfDownload = function(domId) {var targetDom = $('#'+domId)//把需要导出的pdf内容clone一份，这样对它进行转换、微调等操作时才不会影响原来界面

var copyDom =targetDom.clone()//新的div宽高跟原来一样，高度设置成自适应，这样才能完整显示节点中的所有内容(比如说表格滚动条中的内容)

copyDom.width(targetDom.width() + 'px')

copyDom.height(targetDom.height()+200 + 'px')

$('body').append(copyDom)//ps:这里一定要先把copyDom append到body下，然后再进行后续的glyphicons2canvas处理，不然会导致图标为空

//svg2canvas(copyDom)

//loadImg(copyDom)

html2canvas(copyDom, {

onrendered:function(canvas) {var imgData = canvas.toDataURL('image/jpeg')var img = newImage()

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('pdf_' + new Date().getTime() + '.pdf')

}//删除复制出来的div

copyDom.remove()

},

background:'#FFF',//这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。

allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas

})

}

二、初步测试的结果

有了上面的方法当然迫不及待的进行测试-- 测试导出页面如下

导出成功结果如下

这