关于前端:JS-实现网页指定区域导出PDF

残缺业务场景：
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...