- A+
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
上家公司有个需求是批量导出学生的二维码，我一想这简单啊，不就是先批量获取学生数据，然后根据QRcode生成二维码，然后在用html2canvas导出成图片嘛。 由于公司工具库有现成的生成压缩包方法，我只需要获得对应的图片blob就可以了，非常的easy啊。
开始动手
思路没啥问题，但第一步就犯了难，用过react框架或者其他MVVM框架的都知道，这种类型的框架都是数据驱动视图，也就是说一般情况下，必须先获得数据，然后根据数据才能得到视图。
但是问题是，html2canvas也是必须需要获取真实dom的快照然后转换成canvas对象。
听着好像不冲突，诶，我先获取数据，然后渲染出视图，在依次通过html2canvas来生成图片不就完事了嘛！但是想归想，却不能这么做。
原因主要有两个，一个原因呢是交互逻辑上就行不太通，也不友好。你不能“啪”点一下导出按钮，然后获取数据之后再去等所有数据渲染出对应组件之后，再去延迟处理导出逻辑。（耗时太长）
另一个原因呢，主要是跟html2canvas这个工具库有关系了，它的原理简单来说呢，就是复制你期望获取截图的那个dom的渲染树，然后根据这个渲染树在当前页面生成一个你看不见的canvas dom对象来。那么问题来了，因为是批量下载，所以肯定会有大量的数据，那么如果不做处理，就会有大量的canvas对象存在当前页面。
而canvas标签是会占用内存的，那么当同时存在过多的canvas时，就会出现一个问题，页面卡顿甚至崩溃。所以，这是第二个原因。
那么这篇文章主要是解决第一个原因所带来的问题的。
编程！启动！
第一步
那么先简单的随便生成一个组件好了，因为是公司源码嘛，大家懂的都懂。
interface IProps { qrCode: string studentName: string className: string } const SaveQRCode = (props: IProps) => { const divRef = React.useRef<HTMLDivElement>(null) // 具体怎么渲染看你们需求了 return ( <div ref={divRef}>XXXXXX</div> ) }
看到代码，用过html2canvas的小伙伴应该知道ref是干嘛用的了，html2canvas()这个方法的参数是HTMLElement，传统一点的办法呢，可以通过document.getXXXXX这个方法来获取真实的dom元素。那么Ref就是替代前者的，它可以直接通过react框架获取真实的dom元素。
第二步
那么最简单的组件我们已经写好了，接下来就是如何动态的挂载这个组件，并且在挂载完之后就立刻卸载它。
那么先来理一下思路： 1、动态地挂载这个组件，且不能被用户肉眼观察到 2、挂载动作执行完立刻执行html2canvas获取canvas对象 3、通过canvas对象转换成blob对象并返回，或者直接通过回调函数返回canvas对象 4、组件卸载，清空dom树
那么根据上面几点，可以得出：从外部获取的肯定是有组件这个东西，而挂载的位置则有要求，但并不一定需要从外部获取。
为了不被样式影响，我们直接在body标签下，再挂载一个div标签，来进行组件的动态渲染和卸载，同时也避免了影响之前dom树的结构。
思路就说到这了，接下来直接抛出代码：
const AsyncMountComponent = ( getElement: (onUnmount: () => void) => ReactNode, container: HTMLElement, ) => { const root = createRoot(container) const element = getElement(() => { root.unmount() container.remove() }) root.render(<Suspense fallback={null}>{element}</Suspense>) }
这里我因为想做的更加通用一点，所以把根节点让外部进行处理，如果希望更加业务一点，比如当前这个场景必然不会让用户可见，可以直接改成
const AsyncMountComponent = (getElement: (onUnmount: () => void) => ReactNode) => { const div = document.createElement('div') div.style.position = 'absolute' div.style.left = '2000px' document.body.appendChild(div) const root = createRoot(div) const element = getElement(() => { root.unmount() container.remove() }) root.render(<Suspense fallback={null}>{element}</Suspense>) }
这里的隐藏方式看个人喜好，无所谓。但有一点要注意的是，一定要可见，不然的话html2canvas生成不了图片，这里是最简单粗暴的方式，直接偏移left。
第三步
那么地基打好了，我们该怎么用这两个东西呢
interface IProps { qrCode: string studentName: string className: string // 这里自然就是获取blob和canvas对象的地方了 onConfirm?: (data: { canvas: HTMLCanvasElement, blob: Blob }) => void // 这里是卸载的地方，由外部决定何时卸载节点，更加自由 onUnmount?: () => void } const SaveQRCode = (props: IProps) => { const divRef = React.useRef<HTMLDivElement>(null) useEffect(() => { if (divRef.current && props.onConfirm) { html2canvas(divRef.current).then((canvas) => { canvas.toBlob((blob) => { props.onConfirm!({canvas, blob: blob!}) props.onUnmount!() }) }) } }, []) // 具体怎么渲染看你们需求了 return ( <div ref={divRef}>XXXXXX</div> ) }
首先我们对组件进行修改，因为我的方案是第一种，没有太业务向，所以说一些业务逻辑必然是要到组件层面去处理的，所以添加两个参数，一个获取blob和canvas对象，另一个用来卸载节点。
至于useEffect就很容易理解了，挂载后用html2canvas处理组件顶层div获取截图，然后返回数据，并卸载节点。
组件改造完毕了，那我们接下来把这两个组合一下
const getQRCodeBlobCanvas = async (props: IProps): Promise<{ canvas: HTMLCanvasElement, blob: Blob }> => { return new Promise((resolve) => { const div = document.createElement('div') div.style.position = 'absolute' div.style.left = '2000px' document.body.appendChild(div) asyncMountComponent( (dispose) => (<SaveQRCode {...props} onConfirm={resolve} onUnmount={dispose}/>), div ) }) }
那么一个简单的动态阅后即焚组件就完成了，且可以直接通过方法的形式使用，完美适配批量导出功能，当然也包括单个导出，至于批量导出的细节我就不写了，非常的简单。
升级V2
我只提供了最通用一种方式来做这么个阅后即焚组件，之后我闲着无聊，又把它做了一次业务向升级，获得了V2版本
这个版本呢，你只需要传入一个组件进去，且不用关心何时卸载，它是最真实的阅后即焚。至于数据，会通过Promise的方式返回给用户。
const Wrapper = ({callback, children}: { callback: (data: { blob: Blob,canvas: HTMLCanvasElement }) => void, children: ReactNode }) => { const divRef = useRef<HTMLDivElement>(null) useEffect(() => { if (divRef.current) { html2canvas(divRef.current).then((canvas) => { canvas.toBlob((blob) => { callback({canvas, blob: blob!}) }) }) } }, []) return <div ref={divRef}> {children} </div> } const getComponentSnapshotBlobCanvas = (getElement: () => ReactNode): Promise<{canvas:HTMLCanvasElement, blob: Blob}> => { return new Promise((resolve) => { const div = document.createElement('div') div.style.position = 'absolute' div.style.left = '2000px' document.body.appendChild(div) const root = createRoot(div) root.render(( <Wrapper callback={(values) => { root.unmount() div.remove() resolve(values) }} > {getElement()} </Wrapper> )) }) }
本文转载于:
https://juejin.cn/post/7278512641781334051
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
