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

问题:
PDF下载下来后,文档内容被暴力分割。
在这里插入图片描述

解决方案:
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

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;
    },
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/372160.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

最短编辑距离问题与动态规划----LeetCode 72.编辑距离

动态规划&#xff08;Dynamic Programming, DP&#xff09;是解决复杂问题的一个强大工具&#xff0c;它将问题分解成更小的子问题&#xff0c;并使用这些子问题的解决方案来构建整体问题的解决方案。在深入探讨最短编辑距离问题之前&#xff0c;让我们先理解什么是动态规划&am…

CGAL的二维分段的Delaunay图

本章描述了CGAL的二维分段Delaunay图。我们从定义一节中的一些定义开始。2D段Delaunay图形包的软件设计在“软件设计”一节中进行了描述。在“几何特征”一节中&#xff0c;我们讨论了2D段Delaunay图包的几何特征&#xff0c;在“段Delaunay图层次结构”一节&#xff0c;简要描…

【Shell的运行原理以及Linux当中的权限问题】

Shell的运行原理以及Linux当中的权限问题 Shell的运行原理Linux当中的权限问题Linux权限的概念如何实现用户账号之间的切换如何仅提升当前指令的权限如何将普通用户添加到信任列表 Linux权限管理文件访问者的分类 (人)文件类型和访问权限 (事物属性)文件权限值的表示方法文件访…

MacOS系统电脑远程桌面控制windows系统电脑【内网穿透】

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1. 测试本地局域网内远程控制1.1 Windows打开远程桌面1…

自动化测试的ROI

ROI模型树 提升ROI的基础出发点&#xff1a;增加运行次数 手段&#xff1a;测试左移、测试右移 测试左移&#xff08;测试阶段&#xff09; 原始测试流程&#xff1a; 软件生命周期&#xff1a;软件需求分析、软件设计、软件开发、单元测试、集成测试、系统测试开发阶段&…

ideaIU-2023.2.1安装教程

ideaIU-2023.2.1安装教程 一、ideaIU-2023.2.1安装1.1 下载IdeaIU-2023.2.1安装包1.2 安装ideaIU-2023.2.1 二、ideaIU-2023.2.1激活 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一、ideaIU-2023.2.1安装 1.1 下载IdeaIU-2023.2.1安装包…

import blind_watermark ModuleNotFoundError: No module named ‘blind_watermark‘

Traceback (most recent call last): File "d:\python\PYTHON_VSCOD\demo.py", line 1, in <module> import blind_watermark ModuleNotFoundError: No module named blind_watermark 如何选择正确的解释器 在 Visual Studio Code (VS Code) 中更改 Python 解释…

5.0 HDFS 集群服务建立教程

HDFS 集群是建立在 Hadoop 集群之上的&#xff0c;由于 HDFS 是 Hadoop 最主要的守护进程&#xff0c;所以 HDFS 集群的配置过程是 Hadoop 集群配置过程的代表。 使用 Docker 可以更加方便地、高效地构建出一个集群环境。 每台计算机中的配置 Hadoop 如何配置集群、不同的计…

YOLOv5独家改进:上采样算子 | 超轻量高效动态上采样DySample,效果秒杀CAFFE,助力小目标检测

💡💡💡本文独家改进:一种超轻量高效动态上采样DySample, 具有更少的参数、FLOPs,效果秒杀CAFFE和YOLOv5网络中的nn.Upsample 💡💡💡在多个数据集下验证能够涨点,尤其在小目标检测领域涨点显著。 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/cate…

多线程生命周期与通信(二)通信

线程自启动时&#xff0c;就拥有了自己的栈空间。然后会一直运行直到结束。多线程的目的是多条线程执行不同的逻辑业务从而能够提升业务整体的响应速度&#xff0c;如果线程仅仅是孤零零的执行&#xff0c;不同的逻辑业务就不能最终汇聚成一个完整的业务那么多线程也就失去了意…

Windows10安装PCL1.14.0及点云配准

一、下载visual studio2022 下载网址&#xff1a;Visual Studio: 面向软件开发人员和 Teams 的 IDE 和代码编辑器 (microsoft.com) 安装的时候选择"使用C的桌面开发“&#xff0c;同时可以修改文件路径&#xff0c;可以放在D盘。修改文件路径的时候&#xff0c;共享组件、…

Web APIs 2 事件

Web APIs 2 事件 事件监听案例&#xff1a;广告关闭案例&#xff1a;随机问答 事件监听版本事件类型案例&#xff1a;轮播图完整焦点事件键盘事件输入事件案例&#xff1a;评论字数统计 事件对象获取事件对象事件对象常用属性案例&#xff1a;评论回车发布 环境对象this回调函数…

电脑怎么扫描纸质文件?6步轻松完成扫描!

“由于工作的需要&#xff0c;我要将部分纸质文件扫描到电脑上&#xff0c;不知道应该怎么操作会更方便呢&#xff1f;希望大家给我出出主意。” 随着科技的进步&#xff0c;电脑已经成为了我们日常生活和工作中不可或缺的工具。除了传统的文字处理和数据处理&#xff0c;电脑还…

【漏洞库】O2OA系统

O2OA invoke 后台远程命令执行漏洞 CNVD-2020-18740 漏洞描述 O2OA是一款开源免费的企业及团队办公平台,提供门户管理、流程管理、信息管理、数据管理四大平台,集工作汇报、项目协作、移动OA、文档分享、流程审批、数据协作等众多功能,满足企业各类管理和协作需求。 O2OA系…

拍摄的视频怎么做二维码?视频在线转二维码的技巧

现在学校经常会将学生日常的拍摄的短片做成二维码之后展示给其他人&#xff0c;其他人可以通过扫描二维码来查看个人表现的视频&#xff0c;有些活动视频也会用视频二维码的方式来传播。那么视频二维码制作的方法及步骤是什么样的呢&#xff1f;下面就让小编通过本文来给大家介…

力扣 121. 买卖股票的最佳时机

题目来源&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 好久没写代码了&#xff0c;啥啥都忘了 C题解1&#xff1a;贪心算法。&#xff08;来源代码随想录&#xff09; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取…

读写锁ReentrantReadWriteLockStampLock详解

传送门&#xff1a;深入理解AQS独占锁之ReentrantLock源码分析 目录 读写锁介绍 ReentrantReadWriteLock介绍 ReentrantReadWriteLock的使用 应用场景 锁降级 读写锁设计思路 StampedLock介绍 StampedLock的使用 演示乐观读 在缓存中的应用 使用场景和注意事…

033-安全开发-JavaEE应用SQL预编译Filter过滤器Listener监听器访问控制

033-安全开发-JavaEE应用&SQL预编译&Filter过滤器&Listener监听器&访问控制 #知识点&#xff1a; 1、JavaEE-JDBC-SQL预编译 2、JavaEE-HTTP-Filter过滤器 3、JavaEE-对象域-Listen监听器 演示案例&#xff1a; ➢JavaEE-预编译-SQL ➢JavaEE-过滤器-Filter ➢…

python Cloudflare 批量关闭IPv6兼容性脚本

Cloudflare免费版控制台不给关IPv6&#xff0c;需要使用API关闭&#xff0c;先从我的个人资料里面申请API令牌&#xff0c;再执行脚本 import requests import jsonheaders {X-Auth-Email:cloudflare登入账户, #输入登入账户的邮箱X-Auth-Key: Global API Key, #输入上图申请…

计算机自顶向下 Wireshark labs——DNS

如本文第2.4节所述&#xff0c;域名系统(DNS)将主机名转换为IP地址&#xff0c;在互联网基础设施中发挥着关键作用。在本实验中&#xff0c;我们将仔细研究DNS的客户端。回想一下&#xff0c;客户端在DNS中的角色相对简单—客户端向其本地DNS服务器发送查询&#xff0c;并收到响…
最新文章