简介
本文将带领读者实现在React中将DOM元素转换成PDF,并支持分页和导出的功能,同时还将手动封装一个页面DOM截图hook
准备工作
本例主要使用React+html-to-image+jspdf来实现,先使用html-to-image对DOM元素进行截图,再对图片进行切割分页通过jspdf生成并导出
使用html2Canvas亦可,但我在使用html2Canvas的过程中会出现很多样式不兼容的问题出现,而html-to-image相比问题较少,所以这里我选择html-to-image
首先安装html-to-image和jspdf
yarn add html-to-image jspdf
1.封装useScreenShot hook
通过对html-to-image的hook封装我们可以更方便的获取到生成的图片、生成loading状态等,并且hook的方式更符合react的设计模式
options:[配置]
image:生成的图片
takeScreenshot:生成事件
isLoading:生成中的loading
clear:清除生成图片的缓存
const { image, takeScreenshot, isLoading, clear } = useScreenshot(options)
2.DOM截图
这里假设我们要进行截图的容器是类名为container的div,其子元素为三个 1920px*1080px 且间距为10px的div
3.截图分页生成pdf
主要思想就是将DOM图片按固定尺寸分批次调用 pdf.addPage() 和 pdf.addImage()方法生成pdf页面并插入剪切后的图片,如此循环操作,直至将整张图片遍历完毕后结束，最后调用pdf.save()方法进行保存
4.效果预览
页面DOM
生成后的分页PDF
5.注意事项
html-to-image和html2canvas在绘制包含外链图片的dom时都会报图片跨域的错误,解决方法是将外链图片转为base64格式或者存在本地,亲测有效
如果dom中有echarts组件,此时如果要对dom进行缩放操作时不要用zoom,否则会造成鼠标和tooltip位置错位的bug,使用transform:scale()能达到同样的效果且不会出现此bug,但要记得使用transform-origin来调整缩放位置
