vue2+html2pdf下载PDF,PDF分页切割

问题:

PDF下载下来后,文档内容被暴力分割。

解决方案:

HTML

html 复制代码
<!-- 打印按钮 -->
<el-button type="primary" size="small" class="el-icon-download right_btn" @click="downloadPDF">PDF</el-button>

<!-- 需要打印的dom,给最外层父元素设置ID -->
<div id="print">
	<!-- dom结构 -->
	<div class="paper-row"></div>
	... ...
</div>

JS

javascript 复制代码
methods: {
    downloadPDF() {//下载函数
      try {
        let vm = this;
        // A4宽高比例
        const A4_WIDTH = 592.28;
        const A4_HEIGHT = 841.89;
        
        vm.$nextTick(() => {
          let target = document.getElementById("print"); // 根据ID取到要打印的dom区域
          let pageHeight = target.scrollWidth * A4_HEIGHT / A4_WIDTH;//根据比例计算需要打印的文件的总高度
          // 获取每一行class类名为paper-row的dom集合
          let lableListID = document.getElementsByClassName("paper-row");
          let addMarginIndexs = [];//被添加了下边距的索引集合
          
          // 遍历每一行dom,计算它是否超出所在A4页,计算合适的分割点。
          for (let i = 0; i < lableListID.length; i++) {
          	//当前遍历的元素处于第几页A4纸,返回页码
            let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
            //当前元素是否超出当前页A4纸,true or false.
            let isOver = this.isSplit(lableListID, i, multiple * pageHeight);
            if (isOver) {//当dom内容超出a4的高度
            	// 当前页底部空白占位的高度 = 页码 * 每一页的高度 - (当前元素到顶部的距离 + 当前元素的高度)
              	let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight) + 230;// 230px是我计算的值与实际页面的偏差,因人而异,不一定非要加上。
              	// 给超出的dom添加margin-bottom,用空白占满当前页,把下一行元素顶到下一页。
              	lableListID[i].style['margin-bottom'] = _H + "px";
              	addMarginIndexs.push(i);//添加了margin-bottom的元素,保存其索引,用于下载完成后清空margin
            }
          }
          this.html2pdf(document.getElementById("print"), `试卷详情`);//开始下载文件

          //文件下载完成后,移除margin-bottom,否则原来的页面会有空白。
          addMarginIndexs.forEach(index => {
            lableListID[index].style['margin-bottom'] = '0px'
          })
          addMarginIndexs = []
        });
      } catch (error) {
        console.log(error);
      }
    },
    isSplit(nodes, index, pageHeight) {
      // 计算当前dom是否跨越了a4大小
      let nodesH = nodes[index].offsetTop + nodes[index].offsetHeight;
      // 判断条件:当前dom未超出A4,但是下一行dom超出了
      if (
        nodesH < pageHeight &&
        nodes[index + 1] &&
        nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
      ) {
        return true;
      }
      return false;
    },
}
相关推荐
BillKu1 小时前
Vue3 Element Plus 对话框加载实现
javascript·vue.js·elementui
郝YH是人间理想2 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core2 小时前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows
初遇你时动了情2 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287562 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔3 小时前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好3 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
运维@小兵3 小时前
vue配置子路由,实现点击左侧菜单,内容区域显示不同的内容
前端·javascript·vue.js
koiy.cc4 小时前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts
一只专注api接口开发的技术猿4 小时前
企业级电商数据对接:1688 商品详情 API 接口开发与优化实践
大数据·前端·爬虫