vue3 jspdf,element table 导出excel、pdf,横板竖版分页

多个表格需要,pdf需要的格式与原本展示的表格样式不同

1.创建一个新的表格,设置pdf需要的样式,用vue的h函数放入dom中

2.excel用xlxs插件直接传入新建el-table的dom,直接导出

3.pdf导出类似excel黑色边框白底黑字的文件,把el-table改成需要的样式,

由于table内部的表格是由td,tr绘制的所以表头和表格本身必须使用插槽写div给固定的表格宽度和高度配合

 :row-style="rowStyle":cell-style="cellStyle":header-cell-style="headerCellStyle"

4.导pdf使用jspdf插件,只能接受图片格式(base64/png、jpg)等,使用html2Canvas先把dom转成canvas在转成图片

5.pdf文件的尺寸和分页需要根据需求设置,主要方法是

创建pdf文件对象let pdf = new jsPDF('p', 'mm', 'a4'); 
为pdf页添加图片内容
pdf.addImage(testImage,'JPEG',10,10,190,Math.min(a4h, (190 * page.height) / page.width),);
新增一页
pdf.addPage();

demo

exportPDFExcel.js

导出方法调出弹窗,调用addTable方法dom创建成功后处理导出事件

import { ElMessageBox, ElButton, ElLoading, ElTable } from 'element-plus'
import { h, nextTick } from 'vue'
import { request } from "@/utils/request";
import Menu from "./creatTable.js";
import { saveAs } from "file-saver";
import XLSX from "xlsx";
import { removeTable } from "./creatTable";
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
let fileName = ''
let fileType = ''
let mesBox = null
let loading = null
//导选择创口,pdfexcel
export function exportMessageBox(params, name, columns) {ElMessageBox({title: '请选择导出格式',message: h('p', null, [h('div', {class: 'el-button el-button--primary el-button--default', innerHTML: 'Excel', onClick: () => {getData(params, name, columns, 'xlsx')}}),h('div', {class: 'el-button el-button--primary el-button--default', innerHTML: 'PDF', onClick: () => {getData(params, name, columns, 'pdf')}})]),'showConfirmButton': false})}
function getData(params, name, columns, type) {
//关闭弹窗,打开loadingmesBox = document.querySelector(".el-message-box__headerbtn");mesBox.click();loading = ElLoading.service({text: "正在下载数据,请稍候",background: "rgba(0, 0, 0, 0.7)",});fileName = namefileType = type//业务操作,调接口抽数据request.get(params.url, params).then((response) => {if (response.code === 200) {let list = response.rows;
//创建table,传递列和数据组Menu.addTable(list, columns)}});
}
export function downFile(params) {
//构建文件名const currentDate = new Date();const year = currentDate.getFullYear();const month = String(currentDate.getMonth() + 1).padStart(2, "0");const day = String(currentDate.getDate()).padStart(2, "0");const hours = String(currentDate.getHours()).padStart(2, "0");const minutes = String(currentDate.getMinutes()).padStart(2, "0");const seconds = String(currentDate.getSeconds()).padStart(2, "0");const formattedDate = `${year}_${month}_${day}_${hours}_${minutes}_${seconds}`;const txt = `${fileName}${formattedDate}.${fileType}`nextTick(() => {
//获取到domconst table = document.querySelector("#table_export_content_one")if (fileType === 'xlsx') {
//导出excel,直接传dom给XLSX用其方法const workbook = XLSX.utils.table_to_book(table,{raw: true, //有的是日期、小数等格式,直接乱码#。所以这里直接保留原始字符串});const wbout = XLSX.write(workbook, {bookType: "xlsx",bookSST: true,type: "array",});saveAs(new Blob([wbout], {type: "application/octet-stream",}),txt);removeTable()loading.close()}else {downPDF()}});
}
//导出pdf
function downPDF() {const table = document.querySelector("#table_export_content_one")let title = fileName
//表格整体转canvashtml2Canvas(table, {removeContainer: true,useCORS: true,}).then((canvas) => {let pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向
//a4w和a4h在列少的情况可以直接配210*297,列多横板分页需要配成表格宽度*一页需要放的表格数,高度类比let ctx = canvas.getContext('2d'),a4w = 154 * 8,a4h = 25 * 100, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277renderedWidth = 0let kss = truewhile (renderedWidth <= canvas.width) {let renderedHeight = 0while (renderedHeight <= canvas.height) {let page = document.createElement('canvas');page.width = Math.min(a4w, canvas.width - renderedWidth);page.height = Math.min(a4h, canvas.height - renderedHeight); //可能内容不足一页//getImage获取一页的选区转成图片,参数为x,y,width,heightpage.getContext('2d').putImageData(ctx.getImageData(renderedWidth,renderedHeight,Math.min(a4w, canvas.width - renderedWidth),Math.min(a4h, canvas.height - renderedHeight),),0,0,);const testImage = page.toDataURL('image/jpeg', 1.0)
if(!kss){const allImage = canvas.toDataURL('image/jpeg', 1.0)const a = document.createElement("a");a.download =  '0123456.PNG';a.href = allImage;document.body.appendChild(a);a.click();document.body.removeChild(a);kss=true
}
//将获取的该页image加入到pdf中pdf.addImage(testImage,'JPEG',10,10,190,Math.min(a4h, (190 * page.height) / page.width),); //添加图像到页面,保留10mm边距renderedHeight += a4h;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容,添加一个空页}  }renderedWidth += a4w;if (renderedWidth < canvas.width) {pdf.addPage(); //如果后面还有内容,添加一个空页}}pdf.save(title + '.pdf');
//移除临时创建的table,removeTable()loading.close()})
}function formatJson(filterVal, list) {return list.map((v) =>filterVal.map((j) => {// 进行日期格式化const arr = j.split(".");if (arr.length === 1) {return v[j];} else if (arr.length === 2 && eval("v." + arr[0])) {return eval("v." + j);} else if (arr.length === 3 &&eval("v." + arr[0]) &&eval("v." + arr[0] + "." + arr[1])) {return eval("v." + j);}return "";}));
}

creatTable.js

创建table方法和移除table方法

import { createVNode, render ,h, nextTick} from "vue";
import tableElement from "./index.vue";import {downFile} from './exportPDFExcel'//      定义一个div容器
const div = document.createElement("div");document.body.appendChild(div);
export default {addTable(list, columnsProp,) {const vnode = createVNode(tableElement, { list, columnsProp });render(vnode, div);nextTick(()=>{downFile()})},
};
export const removeTable = function () {render(null, div);
};

index.vue

虚拟构建的table的dom内容,和参数处理

<template><div class="export_box_table"><div class="export_table"><el-table:row-style="rowStyle":cell-style="cellStyle":header-cell-style="headerCellStyle"id="table_export_content_one":data="test"isShowDynamicColumn><el-table-columnv-for="item in columns":label="item.label":prop="item.prop"><template #header="scope"><div :style="{ width: cellHeight + 'px' }">{{ item.label }}</div></template><template #default="scope"><div:style="{'background-color': getStyle1(scope.row, item),width: cellHeight + 'px',color: '#000',}">44444</div></template></el-table-column></el-table></div></div>
</template><script setup>
import dciTableColumn from "@/views/admin/dci/components/dciTableColumn.vue";
import { ElTable, ElTableColumn } from "element-plus";
import { computed } from "vue";const { proxy } = getCurrentInstance();
const columns = ref([]);
const cellHeight = ref(150);
const tableWidth = computed(() => {return (cellHeight.value+26) * (columns.value.length) + "px";
});
//测试数据
let testObj = {createBy: null,createTime: "2023-11-20 16:29:57",instPowerT: 0,instPowerMw: 0,instCoal: 0,instGas: 0,instWater: 0,instElec: 0,instHeat: 301.73,}
let test = new Array(200).fill(testObj);
//测试结束
defineProps({list: {type: Array,default() {return [];},},columnsProp: {type: Array,default() {return [];},},
});initTable();
function initTable() {columns.value = [];proxy.columnsProp.forEach((item, index) => {if (item.props) {initItem(item.props);columns.value.push(item.props);}});
}function rowStyle() {return {// "background-color": "rgba(2,5,2,0.2)",// "background-color": "rgba(7,29,68,1)",color: "#000",};
}
function cellStyle() {let hei = "2px";let style = {border: "1px solid #000",// "background-color": "rgba(7,29,68,1)","background-color": "#fff",padding: "0px",height: hei,"line-height": hei,};return style;
}
function headerCellStyle() {return {"background-color": "#fff!important",width: "250px",border: "1px solid #000",color: "#000",height: "32px!important","font-size": "14px",padding: "0px","line-height": "32px",};
}function initItem(item) {item.magnification = item.magnification ? item.magnification : 1;item.suffix = item.suffix ? item.suffix : "";item.color = item.color ? item.color : "";item.type = item.type ? item.type : "";item.tooltip = item.tooltip ? item.tooltip : "";item.chuhui = item.chuhui ? item.chuhui : "";item.ziduanName = item.ziduanName ? item.ziduanName : "";item.ziduanValue = item.ziduanValue ? item.ziduanValue : "";item.ziduanColor = item.ziduanColor ? item.ziduanColor : "";item.isPhone = item.isPhone ? item.isPhone : false;item.time = item.time ? item.time : false;item.fixedNumber = item.fixedNumber ? item.fixedNumber : 1;item.export = item.export ? item.export : false;
}</script><style scoped>.export_box_table{width: 800px;overflow: auto;/* position: fixed; */height: 500px;/* z-index: 500; *//* top: 0px; */background-color: rgb(0, 255, 179);}
.export_table {width: fit-content;height: 500px;background-color: red;/* position: absolute;top: 0px;left: 0px; */overflow: auto;
}
#table_export_content_one {width: v-bind(tableWidth);
}
</style>
<style lang="scss" scoped>
.column_visible {position: absolute;z-index: 9;left: 100px;top: -0px;
}
</style>
<style>
.hover_row_pointer:hover {cursor: pointer;
}
</style>

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

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

相关文章

低代码工业组态数字孪生平台

2024 两会热词「新质生产力」凭借其主要特征——高科技、高效能及高质量&#xff0c;引发各界关注。在探索构建新质生产力的重要议题中&#xff0c;数据要素被视为土地、劳动力、资本和技术之后的第五大生产要素。数据要素赋能新质生产力发展主要体现为&#xff1a;生产力由生产…

【linuxC语言】fcntl和ioctl函数

文章目录 前言一、功能介绍二、具体使用2.1 fcntl函数2.2 ioctl函数 三、拓展&#xff1a;填写arg总结 前言 在Linux系统编程中&#xff0c;经常会涉及到对文件描述符、套接字以及设备的控制操作。fcntl和ioctl函数就是用来进行这些控制操作的两个重要的系统调用。它们提供了对…

Visual Studio中怎样更改Nuget程序包源

场景 Visual Studio 2019 在使用NuGet添加依赖包时&#xff0c;在预览中搜索不到程序包。 排查下NuGet的程序包源为本地。 将程序包源修改下。 实现 在解决方案上右击选择管理解决方案中的NuGet程序包(在 Visual Studio 中打开“工具”>“选项”>“NuGet 包管理器”…

请求路径引发的http308错误

记录一个请求路径输错引发的问题。 正确路径&#xff1a; /user/bind-email 请求路径我们如果输错故意多打一个s /user/bind-emails 正常预检请求会报错404未找到&#xff0c;我们下意识的就去排查路径是不是写错了 但是如果多打一个/ /user//bind-email 此时预检请求会报308永…

Java中优雅实现泛型类型的强制转换

在Java中经常遇到将对象强制转换成泛型类的情况&#xff1a; Map<String, Object> data Map.of("name", "XiaoMing","age", 17,"scores", List.of(80, 90, 70) );List<Integer> scores (List<Integer>) data.get…

ASP.NET数据存储与交换系统设计

摘 要 该系统以Microsoft Visual Studio 2003作为开发工具&#xff0c;选用SQL Server 2000数据库来实现数据存储&#xff0c;并设计开发了一种基于B/S模式的数据存储与交换系统。该系统完成了用户注册管理、后台管理和用户空间管理功能&#xff1b;为每个用户提供了个人的存…

数据结构中的栈(C语言版)

一.栈的概念 栈是一种常见的数据结构&#xff0c;它遵循后进先出的原则。栈可以看作是一种容器&#xff0c;其中的元素按照一种特定的顺序进行插入和删除操作。 压栈&#xff1a;栈的插入操作叫做进栈/压栈/入栈&#xff0c;入数据在栈顶。 出栈&#xff1a;栈的删除操作叫做…

区块链技术:DAPP开发

随着科技的飞速发展&#xff0c;区块链技术逐渐渗透到各个领域&#xff0c;其中DAPP&#xff08;去中心化应用&#xff09;的发展尤为引人注目。作为一种新型的应用程序&#xff0c;DAPP正在重塑未来商业生态&#xff0c;其潜力无可估量。 一、DAPP的定义和特点 DAPP是指基于…

基于ssm+vue+Mysql的房屋租赁系统求租合同

开发语言&#xff1a;Java框架&#xff1a;ssmJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.…

交通运输智慧监管平台---强化物流安全与效率的新举措

一、建设背景 随着社会对于交通安全和环境保护的要求不断提高&#xff0c;对卡车运输的监管和合规性要求也逐渐加强。为了满足快速发展的物流需求&#xff0c;提高供应链协同和可追溯性、解决安全问题、提高运输效率和降低成本&#xff0c;我们利用现代技术和信息化手段着力建设…

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…

nginx下载安装配置(含ssl)

下载安装环节 wget https://nginx.org/download/nginx-1.24.0.tar.gz tar -zxvf xxx.tar.gz yum -y install pcre-devel openssl openssl-devel ./configure --prefix/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-stream make & make i…

HTTP协议 --中

http状态码 当浏览者访问一个网页时&#xff0c;浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前&#xff0c;此网页所在的服务器会返回一个包含HTTP 状态码的信息头&#xff08; server header &#xff09;用以响应浏览器的请求。 HTTP 状态码的英文为…

【面试经典 150 | 数组】接雨水

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;预处理方法二&#xff1a;单调栈方法三&#xff1a;双指针 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff…

AI大模型日报#0430:疑似GPT4.5模型刷屏、上交实现「蛋白质功能定向进化」、微软紧急撤回WizardLM-2

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了今日要点以及每条资讯的摘要。 《AI大模型日报》今日要点&#xff1a; 在AI大模型领域&#xff0c;多项研究进展和行业应用动态引发关注。一夜之间&#x…

Opencv_14_多边形填充与绘制

绘制多边形&#xff1a; 1&#xff09;coInvert.polyline_drawing(src); 2&#xff09;void ColorInvert::polyline_drawing(Mat& image) { Mat canvas Mat::zeros(Size(512, 512), CV_8UC3); Point p1(100, 100); Point p2(150, 100); Point p3(200…

vue3 安装-使用之第一篇

首先需要node版本高于V16.14.1 安装 执行 npm create vitelatest 具体选择按照自己实际需要的来 Project name:项目名称 Select a framework:选择用哪种框架 &#xff08;我选择vue&#xff09; Select a variant: 选择用JS还是TS&#xff08;我选择JS&#xff09;找到项目&…

kotlinDSL控制的安卓项目导入已存在的模块后sync报错

原因很明显&#xff0c;但是我还找了好久 因为在import时并没有选择groove还是kotlin控制&#xff0c; 所以默认为groovy控制的&#xff0c;然而主项目是由kotlin dsl控制的grale行为。 原因清楚之后&#xff0c;就可以去检查一下&#xff0c;项目里是否包含了settings.gradle和…

rk3588部署yolov8视频目标检测教程

1. 环境配置 1.1 训练和导出onnx环境 #使用conda创建一个python环境 conda create -n torch python3.9#激活环境 conda activate torch#安装yolov8 pip install ultralytics -i https://pypi.tuna.tsinghua.edu.cn/simple 1.2 导出rknn环境 安装toolkit2-1.5.2 下载链接&am…

使用 LlamaIndex 和 Llama 2-Chat 构建知识驱动的对话应用程序

文章目录 使用 LlamaIndex 和 Llama 2-Chat 构建知识驱动的对话应用程序Llama 2-70B-聊天LlamaIndex 解决方案概述先决条件使用 SageMaker JumpStart 部署 GPT-J 嵌入模型使用 SageMaker Python SDK 进行部署在 SageMaker Studio 中使用 SageMaker JumpStart 进行部署使用 Sage…