admin管理员组

文章数量:1648923

1、场景

由前端实现的报表（含echarts图和table表格），需要将整个报表进行导出下载，但不包括页面中的导航栏及其他元素。

2、问题

1）在导出pdf时 ，如果页面长度超过一页，插件无法只能识别分页，会将内容切割，如下所示：

2）目的：实现当前页放不下该页面元素时，插入空白元素将该元素下挤，实现分页但不分割内容

3、解决方案

通过计算dom元素的高度逐一拆分，动态增加dom元素使布局满足分页但不分割内容，效果如下：

注意：
1）计算高度时，切莫忘记margin；
2）由于通过dom.children 获取子元素，逐一累计并拆分，在添加空白元素节点后，获取的子集也会增加，注意循环中的计数单位自增，对空白元素做标记，如果进入到循环则排除；
3）由于本案例中是将页面元素直接做的变化，再pdf下载后，需移除所有增加的空白元素，恢复页面布局；
4）html2PDF插件中的dom元素参数，只能传页面中有的元素，如若隐藏或深度克隆但未添加到html中的元素，则识别不到，控制台会报错(隐藏了的元素也无法导出)；
5）如果将克隆的元素添加到页面中，会丢失echarts图表，故此方案的操作对象为要导出的原dom对象；
6）若页面中的有重叠的元素，会影响高度的计算，修改getCurrentHeight即可；

4、代码如下：

1)methods

本文标签： 分页htmljsPDFDOM

版权声明：本文标题：js 将html 某个dom 导出pdf，并处理分页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729504715a1203493.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。