html2canvas 生成图片时样式丢失的坑

html2canvas 生成pdf时样式丢失的坑

背景

项目中使用了html2canvas和jspdf实现pdf的导出，在调试好下载pdf的样式后，发现偶尔会出现全局样式丢失的情况，本地各种调试并未发现异常，在测试的电脑上发现会报错：css未加载，因为它的MIME类型“text/html”不是“text/css”，如下：

分析定位问题

1.在提示这个css文件异常后，我去测试环境上找对应的css，发现并没有这个css文件，那么问题很明显是因为，测试环境更新后，重新打包的css文件命名改变了，但是由于测试电脑还停留在上一版本的界面，所以导致会在执行html2canvas时获取上一版本的css，导致服务器找不到，返回了404html；

2.html2canvas会在每次执行的时候，重新遍历html的整个dom，重新获取所有静态资源，才会出现获取上一版本的css找不到的问题；

解决方案

第一种方案：
将导出pdf的页面使用到的样式，全部复制在当前页面中，不使用引入的方式；

第二种方案：
使用html-to-image插件替换html2canvas插件，使用toCanvas方法，使用这个插件还有一个好处，可以避免在循环执行html2canvas时，页面响应速度变慢的问题（html2canvas每次执行都会重新加载页面所有静态资源，如果图片等元素过多，要在加载完成后才能执行生成操作，所以会很慢）。