共计 918 个字符，预计需要花费 3 分钟才能阅读完成。
残缺业务场景：
1、单页面，数据很多，有图有表，高度 >8000px，且依据所选条件不同内容区高度会变。
2、有底线，不是有限数据，不是有限滚动。
3、数据是懒加载的，只有子模块滚动到可视区域才会发送子模块内的申请，加载新数据。
当初要在下面的业务场景中导出内容区的 PDF。
那么需要就是：
在一个高度很高，响应式加载数据的网页中导出 PDF。
因为这个导出 PDF 的需要在开始的时候就晓得，所以在实现响应式加载上动了心理，不便后续的 PDF 导出实现。
1、首先要实现数据响应式的加载。用了 IntersectionObserver。
思路：
相似于骨架屏，没有数据的状况下，也会有初始高度。用 IntersectionObserver 来实现当子模块区域进入 IntersectionObserver 的 root 区域，就发送申请，申请回来后加载数据。
2、在导出执行前，让所有的申请收回，数据全副加载，内容区残缺填充数据。
思路：
点击导出 PDF 时，扭转款式，让 root 元素的高度为 auto，root 元素的高度变为 auto 后，所有骨架区域都会进入 root 中 (因为 root 也被骨架区域撑开) 这时所有的骨架区域都进入了 IntersectionObserver 的 root 区域，开始申请数据，之后加载数据。
3、判断全副子模块的数据加载实现（实现之后，能力执行导出 PDF）
思路：
1. 在各个子模块初始化的时候，（发送申请之前）在根模块下注册以后区域信息。
exportComponentsStatus: {
componentId1: false,
componentId2: false,
}2. 在子模块中等到申请实现，在将本人的 componentId 对应的 value 置为 true，当所有的 exportComponentsStatus 都变为 true 之后执行导出 PDF。
exportComponentsStatus: {
componentId1: true,
componentId2: true,
}3、导出 pdf 的实现
html2canvas(html 转 base64 图片，须要分段) ;
jsPDF，将图片放入 PDF 文件，导出。
完结
同步更新到本人的语雀
https://www.yuque.com/diracke…
