不知道各位小伙伴有没有遇到过HTML页面截图并把它下载下来的需求，反正我是遇到了。
当后端因为无法还原页面中饼图样式所以把这个问题抛给了我，对于一个刚入门的前端小白来说，心里有一群可爱的小动物在奔腾。
最后在多方朋友的帮助下，不知不觉，勉勉强强地将需求实现了。但是，遇到了一个大坑......虽然html2canvas可以将页面完整的截图下来，但它的高度是一定的。当用jspdf来分页下载的时候，它的分页是按死的高度来计算的，并不会考虑图片在分页处有没有内容，如果很不幸有内容，不好意思，它会拦腰截断。像这样......
可怜的被拦腰截断的图片
jspdf的好用是好用，但是简单、直接、粗暴，我认为这就是它好用的原因所在吧。但这样的下载文件交给客户不像话呀，日期都被截了，谁知道它下一次又会截谁呢。谁都会有理想型，而下载文件的理想型长这样......
理想中的下载文件
我们虽然没有办法控制jspdf的分页，因为这本来就不是我们写的插件，但DOM是我们自己的呀。为了得到自己的理想型，就要在自己有的东西上做优化，这跟谈恋爱是一样的。按照上图的分布可见，我将DOM分成了三个部分，分别获取他们的高度，让他们的和与一页pdf的高度做比较（一页pdf的高度是一定的，宽高比要适合A4纸比例），分成不同的情况：三个部分占一页、第一个占一页、第一二个占一页......分类不用多，够用就行；钱不用多，够花就行（这是不可能的，票子当然越多越好）。所以就有了下面的判断分类......
不够多但是够用的分类
这样一来，就实现了插件完成不了，但是稍微改变一下思路就可以轻松解决的“纸老虎”啦！！
如果大家觉得我说的有什么不足或者压根就不对的，欢迎联系我！（毕竟单身久了有点孤独（开个玩笑，虽然单身是真的，但也不孤独啦））！遇到跟我一样问题的小伙伴也可以联系我，我不一定能解决什么，但是一起讨论讨论还是可以的。
我是挨踢大长腿，和大家一起加油鸭！！
网友评论