导出为PDF加封面且分页处理dom元素分割

文章目录

  • 正常展示页面
  • 导出后效果
  • 代码

正常展示页面

在这里插入图片描述

导出后效果

在这里插入图片描述

代码

组件内

<template><div><div><div class="content" id="content" style="padding: 0px 20px"><div class="item"><divstyle="height: 200px; width: 100%; background: pink; display: none"ref="wrap"><h1>封面</h1></div></div><!--    每一块dom的class类设置成item(自定义)以此处理内容分割  --><div class="item"><button @click="outPutPdfFn">导出</button><!-- 组件  可为任意内容  --><el-row><el-col :span="12"><Echrats indData_id="echarts" /></el-col><el-col :span="12"><Echrats indData_id="echarts1" /></el-col></el-row></div><div class="item">内容22<!-- 组件  可为任意内容  --><el-row><el-col :span="12"><Table  /></el-col><el-col :span="12"><Table  /></el-col></el-row></div><div class="item">内容22 <el-row><el-col :span="12"><Table  /></el-col><el-col :span="12"><Table  /></el-col></el-row><Echrats indData_id="echarts3" /></div><div class="item" style="padding: 20px 0">gsd<!-- 组件  可为任意内容  --><Echrats indData_id="echarts2" /></div><div class="item" style="padding: 20px 0">内容22<!-- 组件  可为任意内容  --><Table style="margin-top: 40px" /></div><div class="item">gsd<!-- 组件  可为任意内容  --><Table style="margin-top: 40px" /><Echrats indData_id="echarts4" /></div></div></div></div>
</template><script>
import Echrats from "./new_content/components/echarts.vue";
import Table from "./new_content/components/table.vue";
import getPdf from "@/utils/pdf";
export default {components: {Echrats,Table,},methods:{outPutPdfFn() {let vm = this;const A4_WIDTH = 592.28;const A4_HEIGHT = 841.89;// $myLoading 自定义等待动画组件,实现导出事件的异步等待交互// this.$myLoading('正在导出pdf,请稍候。。。', true);vm.$nextTick(() => {// dom的id。this.$refs.wrap.style.display = "block";let target = document.getElementById("content");let pageHeight = (target.scrollWidth / A4_WIDTH) * A4_HEIGHT;// 获取分割dom,此处为class类名为item的domlet lableListID = document.getElementsByClassName("item");// 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割for (let i = 0; i < lableListID.length; i++) {let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) /pageHeight);if (this.isSplit(lableListID, i, multiple * pageHeight)||i===0) {let divParent = lableListID[i].parentNode; // 获取该div的父节点let newNode = document.createElement("div");newNode.className = "emptyDiv";newNode.style.background = "#ffffff";let _H =multiple * pageHeight -(lableListID[i].offsetTop + lableListID[i].offsetHeight);newNode.style.height = _H + 30 + "px";newNode.style.width = "100%";let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点// 判断兄弟节点是否存在console.log(next);if (next) {// 存在则将新节点插入到div的下一个兄弟节点之前,即div之后divParent.insertBefore(newNode, next);} else {// 不存在则直接添加到最后,appendChild默认添加到divParent的最后divParent.appendChild(newNode);}}}// 传入title和dom标签,此处是 #content// 异步函数,导出成功后处理交互getPdf("巡检报告单-" + "000" + "-" + "嘿嘿嘿", "#content").then(() => {// 自定义等待动画关闭// this.$myLoading(false);this.$message({type: "success",message: "导出成功",});}).catch(() => {// this.$myLoading(false);this.$message({type: "error",message: "导出失败,请重试",});});this.$refs.wrap.style.display = "none";const arr = document.getElementsByClassName("emptyDiv");const l = arr.length;for (let i = l - 1; i >= 0; i--) {if (arr?.[i] != null) {arr?.[i]?.remove(arr[i]);}}});},isSplit(nodes, index, pageHeight) {// 计算当前这块dom是否跨越了a4大小,以此分割if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&nodes[index + 1] &&nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {return true;}return false;},}
};
</script><style lang="scss" scoped>.item{
margin-top: 30px;
}
</style>>

jsPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';const getPdf = function (title, dom) {// 注册getPdf方法,传入两个参数,此处使用了promise处理导出后的操作/*title: 导出文件名dom: 需要导出dom的id*/return new Promise((resolve, reject) => {html2Canvas(document.querySelector(dom), {useCORS: true, // 由于打印时,会访问dom上的一些图片等资源,解决跨域问题!!重要allowTaint: true // 允许跨域}).then(function (canvas) {let contentWidth = canvas.width;let contentHeight = canvas.height;// 根据A4纸的大小,计算出dom相应比例的尺寸let pageHeight = contentWidth / 592.28 * 841.89;let leftHeight = contentHeight;let position = 0;let imgWidth = 595.28;// 根据a4比例计算出需要分割的实际dom位置let imgHeight = 592.28 / contentWidth * contentHeight;// canvas绘图生成image数据,1.0是质量参数let pageData = canvas.toDataURL('image/jpeg', 1.0);// a4大小let PDF = new JsPDF('', 'pt', 'a4');// 当内容达到a4纸的高度时,分割,将一整块画幅分割出一页页的a4大小,导出pdfif (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {PDF.addPage();}}}// 导出PDF.save(title + '.pdf');resolve(true);}).catch(() => {reject(false);});});
};
export default getPdf;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu Server版 之 mysql 系列

Ubuntu 分 桌面版 和 服务版 桌面版 &#xff1a;有额外的简易界面 服务版&#xff1a;是纯黑框的。没有任何UI界面的可言 安装mysql 安装位置 一般按照的位置存放在 /usr/bin 中 sudo apt-get install mysql-server查看mysql的状态 service mysql status mysql 安全设置…

使用xtcp映射穿透指定服务

使用xtcp映射穿透指定服务 管理员Ubuntu配置公网服务端frps配置service自启(可选) 配置内网服务端frpc配置service自启(可选) 使用者配置service自启(可选) 通过frp实现内网client访问另外一个内网服务器 管理员 1&#xff09;配置公网服务端frps2&#xff09;配置内网服务端…

FS32K144官方提供串口Bootloader对接Matlab串口烧写程序

​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ 前言 Bootloader升级工具&#xff1a;可用TTL、232、485&#xff08;硬件收发模式&#xff09;,其中的一种&#x…

CertGetCertificateChain trust error CERT_TRUST_REVOCATION_STATUS_UNKNOWN

执行命令&#xff1a; curl --cacert http_ca.crt -u elastic https://localhost:9200 结果报错了 直接访问https://localhost:9200/ &#xff0c;正常 解决办法&#xff1a; curl --cacert http_ca.crt -u elastic https://localhost:9200 --insecure

2_Apollo4BlueLite中断控制器NVIC

1.概述 Apollo4BlueLite 的中断控制器是采用 ARM Cortex-M4 内核&#xff0c;并集成了 NVIC&#xff08;Nested Vectored Interrupt Controller&#xff0c;嵌套向量中断控制器&#xff09;作为其中断控制器。 NVIC 是 ARM Cortex-M 系列处理器中常用的中断控制器&#xff0c…

「前缀和以及差分数组」

文章目录 1 前缀和数组1.1 题解1.2 Code1.3 结果 2 二维矩阵的前缀和数组2.1 题解2.2 Code2.3 结果 3 差分数组 1 前缀和数组 适用于快速频繁的计算一个索引区间内的元素之和&#xff0c;核心思想就是使用一个前缀和数组&#xff0c;然后使用前缀和数组的两个元素之差&#xf…

论文笔记--FEDERATED LEARNING: STRATEGIES FOR IMPROVING COMMUNICATION EFFICIENCY

论文笔记--FEDERATED LEARNING: STRATEGIES FOR IMPROVING COMMUNICATION EFFICIENCY 1. 文章简介2. 文章概括3 文章重点技术3.1 联邦学习(federated learning, FL)3.2 Structured updates3.3 Sketched Update 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;FEDERATE…

React之内置的高阶组件

React之内置的高阶组件 React内置了一些高阶组件&#xff0c;以便对一些组件做特殊处理&#xff0c;从而提高代码性能。例如React.memo、React.forwardRef 注意&#xff1a;高阶组件不是Reacts视图组件 什么是高阶组件 高阶组件本质是高阶函数。高阶组件接收一个组件作为参数&…

QListWidget设置QWidget作为QListWidgetItem

1、实现QListWidget按照N像素进行滑动&#xff1b; 2、实现自定义QWidget作为QListWidgetItem&#xff1b; 代码实现&#xff1a; from PyQt5.QtWidgets import QWidget, QLabel, QVBoxLayout, QHBoxLayout, QTextEdit, QListWidget, QListWidgetItem, QScrollArea from PyQt5…

GNN的一篇入门 :A Gentle Introduction to Graph Neural Networks

原文链接 A Gentle Introduction to Graph Neural Networks (distill.pub)https://distill.pub/2021/gnn-intro/ 内容简介&#xff1a;本文是“A Gentle Introduction to Graph Neural Networks”的阅读笔记&#xff0c;因为第一次接触GNN&#xff0c;很多深奥的概念不懂&…

使用TensorFlow和VGG-19模型实现艺术风格迁移:一步一步打造你的数字艺术世界

在当下的AI领域,神经风格迁移是最富有创新性和艺术性的技术之一。这项技术可以将一种图像的风格迁移至另一种图像,创造出让人眼前一亮的视觉效果。这种转变所展现的技术之美,让我们深感人工智能所带来的可能性。本文将带领大家一步步通过TensorFlow和VGG-19模型实现风格迁移…

C++容器——list的模拟实现

目录 一.list的基本结构 二. 接下来就是对list类构造函数的设计了&#xff1a; 三.链表数据的增加&#xff1a; 四.接下来就是迭代器的创建了&#xff1a; 四.简单函数的实现&#xff1a; 五.构造与析构 六.拷贝构造和赋值重载 传统写法: 现代写法&#xff1a; 七.迭…

docker启动mysql时的两个报错

目录 1.Error response from daemon: driver failed programming external connectivity on endpoint mysql 2.Error response from daemon: Conflict. The container name "/mysql" is already in use by container 1.Error response from daemon: driver failed …

【预处理】——获取可变参数宏的参数数量

文章目录 功能说明实现... 的作用__VA_ARGS__ 的作用##__VA_ARGS__ 的作用 解析COUNT_ARGS(2, 4, 5)没有参数 COUNT_ARGS()参数大于 22 个 示例 功能说明 用于获取可变参数宏实际传递了多少个参数。 COUNT_ARGS(1, 2, 3)&#xff0c;填入了 3 个参数&#xff0c;返回值就是 3…

C#中未能找到为main方法指定的XXX.Program怎么解决

有时在修改项目名称后&#xff0c;报错未能找到为main方法指定的XXX.Program 解决办法&#xff1a; 点击进入项目属性&#xff0c;将启动对象设置为空或者你要指定的XXX.Program&#xff08;改名后的&#xff09;

akka 简单使用

由于AKka的核心是Actor&#xff0c;而Actor是按照Actor模型进行实现的&#xff0c;所以在使用Akka之前&#xff0c;有必要弄清楚什么是Actor模型。 Actor模型最早是1973年Carl Hewitt、Peter Bishop和Richard Seiger的论文中出现的&#xff0c;受物理学中的广义相对论(general…

服务器数据恢复-误操作导致存储VDisk丢失的数据恢复案例

服务器数据恢复环境&#xff1a; IBM某型号存储&#xff1b; Solaris操作系统&#xff0c;部署Oracle数据库。 服务器故障&#xff1a; 重建MDisk导致对应的存储池中的VDisk丢失&#xff0c;导致Solaris操作系统中的Oracle数据库无法使用。 服务器数据恢复过程&#xff1a; 1、…

理解Android中不同的Context

作者&#xff1a;两日的blog Context是什么&#xff0c;有什么用 在Android开发中&#xff0c;Context是一个抽象类&#xff0c;它是Android应用程序环境的一部分。它提供了访问应用程序资源和执行各种操作的接口。可以说&#xff0c;Context是Android应用程序与系统环境进行交…

面向对象——步入JavaScript高级阶段的敲门砖

目录 前言一、认识对象1.什么是对象2.对象的方法3.对象的遍历4.对象的深浅克隆 二、认识函数上下文1.函数的上下文规则 ★2.call和apply ★ 三、构造函数1.用new操作符调用函数2.类与实例3.构造函数和类" 四、原型和原型链1.prototype和原型链查找 ★2.在prototype上添加方…

Windows下安装Hadoop(手把手包成功安装)

Windows下安装Hadoop&#xff08;手把手包成功安装&#xff09; Windows下安装Hadoop&#xff08;手把手包成功安装&#xff09;一、环境准备1.1、查看是否安装了java环境 二、下载Hadoop的相关文件三、解压Hadoop安装包四、替换bin文件夹五、配置Hadoop环境变量六、检查环境变…