【Vue】elementUI表格，导出Excel

系列文章

【Vue】vue增加导航标签
本文链接：https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue，在Windows IIS平台部署
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程（解决npm下依赖包版本冲突）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程（详细）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】日期格式化（全局）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格，导出Excel
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135018489

文章目录

  • 系列文章
  • 前言
  • 一、技术介绍
  • 二、项目源码
    • 2.1 安装依赖
    • 2.2 底层库导出Excel（Export2Excel.js）
    • 2.3 创建子组件（ExportExcel）
    • 2.4 父组件引入
    • 2.5 父组件定义参数
    • 2.6 父组件调用
  • 三、效果展示
  • 四、资源链接

前言

本专栏为【Vue】，主要介绍Vue知识点。对于刚刚进入计算机世界的大学生来说，这里普及一个知识：HTML已经不仅仅只能开发 Web，也可以开发 Android、iOS ，所以本文也会介绍 移动端开发。
我个人将安卓开发，分为两大方向：

①原生开发
使用安卓开发工具包（Android SDK）和Java编程语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但是缺点就是对入门的门槛高，测试繁琐需要适配不同屏幕，对开发人员技术要求高。

②混合开发（加壳方式）
使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术 界面渲染、不同屏幕适配（使用栅格技术）效果好。但是缺点就是对底层硬件调用库尚不完善，不过在不断完善中，常用的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支，学习Vue之前不可以速成，得先学会网页三剑客（HTML、CSS和JavaScript），因为Vue中依旧会使用到这些技术，Vue它不够是一种新的编程思想 组件化开发 和 MVVM（数据双向绑定）。

在这里插入图片描述

一、技术介绍

elementUI表格，导出Excel。el-table绑定的数据，转换成Excel，支持标题重命名，支持组件化调动。
本文，将功能做成 子组件形式，因为我觉得对于业务系统来说，导出Excel是基础功能，几乎每一个表单都需要这个功能。
其次，做成 子组件维护起来很方便，代码也简洁很多。

二、项目源码

2.1 安装依赖

20231215，我一般都安装最新的版本，以下是我当前版本号。

“file-saver”: “^2.0.5”,
“xlsx”: “^0.17.0”

2.2 底层库导出Excel（Export2Excel.js）

位置：src\vendor\Export2Excel.js
代码：开源项目，最好不要改动，根据开闭原则，变动最好自己另外创建文件。

/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'function generateArray(table) {var out = [];var rows = table.querySelectorAll('tr');var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll('td');for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute('colspan');var rowspan = cell.getAttribute('rowspan');var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function (range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({s: {r: R,c: outRow.length},e: {r: R + rowspan - 1,c: outRow.length + colspan - 1}});};//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan)for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges];
};function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C,r: R});if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);} else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;
}export function export_table_to_excel(id) {var theTable = document.getElementById(id);var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws['!merges'] = ranges;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
}export function export_json_to_excel({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) {/* original data */filename = filename || 'excel-list'data = [...data]data.unshift(header);for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = [];merges.forEach(item => {ws['!merges'].push(XLSX.utils.decode_range(item))})}if (autoWidth) {/*设置worksheet每列的最大宽度*/const colWidth = data.map(row => row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {'wch': 10};}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255) {return {'wch': val.toString().length * 2};} else {return {'wch': val.toString().length};}}))/*以第一行为初始值*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch'];}}}ws['!cols'] = result;}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${filename}.${bookType}`);
}

2.3 创建子组件（ExportExcel）

位置：src\components\ExportExcel\index.vue
代码：

<!-- @desc 造轮子@author gyc@date 2023-11-23@note 导出Excel通用组件-->
<template><div class="content"><el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="success" icon="el-icon-document"size="mini" @click="handleDownload">导出Excel</el-button></div>
</template>
<script>
import { formatDate } from '@/utils/gyc'
export default {name: 'ExportExcel',// 接收父组件传递的值props: {// 表标题tHeader: {type: Array,required: true,default: []},// 表数据行filterVal: {type: Array,required: true},// 时间列dateTimeColumns: {type: Array,required: true,default: []},// 数据列表datalist: {type: Array,required: true,default: []}},data() {return {// 按钮加载动画downloadLoading: false,// Excel名称filename: 'Excel导出',// 列宽度自动autoWidth: true,// 文件扩展名bookType: 'xlsx',}},methods: {handleDownload() {this.downloadLoading = true// 使用懒加载import('@/vendor/Export2Excel').then(excel => {const tHeader = this.tHeaderconst filterVal = this.filterValconst list = this.datalistconst data = this.formatJson(filterVal, list)// const data = listexcel.export_json_to_excel({header: tHeader,data,filename: this.filename,autoWidth: this.autoWidth,bookType: this.bookType})this.downloadLoading = false})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => {if (this.dateTimeColumns.indexOf(j) > -1) {// if (j === 'timestamp') {// return parseTime(v[j])return formatDate(v[j])} else {return v[j]}}))}}
}
</script>

代码都有注释，看不懂的可以问我，以下是 父组件必须要传给 子组件的参数。

props: {
// 表标题
tHeader: {
type: Array,
required: true,
default: []
},
// 表数据
filterVal: {
type: Array,
required: true
},
// 日期列
dateTimeColumns: {
type: Array,
required: true,
default: []
},
// 数据列表
datalist: {
type: Array,
required: true,
default: []
}
},

在这里插入图片描述
注意：parseTime()为官方提供日期格式化函数，我使用了自己的，具体原因请阅读下文。
【Vue】日期格式化（全局）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

2.4 父组件引入

<script>中引入。

import ExportExcel from '@/components/ExportExcel'

2.5 父组件定义参数

data()定义参数，可以理解为编程语言中的实参，这个需要传入给子组件。

// 导出Excel
tHeader: ['公司编号', '工厂名称', '存货编码', '领用申请单编号', '供应商编号','裸砂原料类型','领用时间'],
filterVal: ['公司编号', '工厂名称', '存货编码', '领用申请单编号', '供应商编号','裸砂原料类型','领用时间'],
dateTimeColumns: ['领用时间'],

2.6 父组件调用

非常简洁吧？我可以说，看了许多网上的文章，没有一篇调用代码，有我简洁的。

<!-- 菜单按钮 -->
<el-row type="flex" class="mb8"><export-excel :tHeader="tHeader" :filterVal="filterVal" :dateTimeColumns="dateTimeColumns" :datalist="dataResult"></export-excel>
</el-row>

三、效果展示

在这里插入图片描述
在这里插入图片描述

四、资源链接

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

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

相关文章

设计模式——策略模式（Strategy Pattern）

设计模式——策略模式（Strategy Pattern）

概述 策略模式又叫政策模式&#xff0c;是一种对象行为型模式。它是将定义的算法家族分别封装起来&#xff0c;让它们之间可以互相替换&#xff0c;从而让算法的变化不会影响到使用算法的用户。策略模式的主要目的是将算法的定义与使用分开&#xff0c;也就是将算法的行为和环…
阅读更多...
小程序使用Nodejs作为服务端，Nodejs与与MYSQL数据库相连

小程序使用Nodejs作为服务端，Nodejs与与MYSQL数据库相连

小程序使用Nodejs作为服务端，Nodejs与MYSQL数据库相连 一、搭建环境二、配置Nodejs三、与小程序交互四、跨域处理/报错处理五、nodejs连接mysql数据库六、微信小程序连接nodejs报错七、小程序成功与服务端相连，且能操作数据库一、搭建环境 新建空文件夹：Win + R进入cmd命令界…
阅读更多...
Unity 控制刚体的移动与旋转的方法

Unity 控制刚体的移动与旋转的方法

在场景创建一个Cube,并添加刚体&#xff0c;如图&#xff1a; 编写脚本&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;[RequireComponent(typeof(Rigidbody))] public class RibRotate : MonoBehaviour {//private Vector3 mo…
阅读更多...
C语言----文件操作(二)

C语言----文件操作(二)

在上一篇文章中我们简单介绍了在C语言中文件是什么以及文件的打开和关闭操作&#xff0c;在实际工作中&#xff0c;我们不仅仅是要打开和关闭文件&#xff0c;二是需要对文件进行增删改写。本文将详细介绍如果对文件进行安全读写。 一&#xff0c;以字符形式读写文件&#xff…
阅读更多...
中通单号查询，中通快递物流查询，对需要的单号进行备注

中通单号查询，中通快递物流查询，对需要的单号进行备注

批量查询中通快递单号的物流信息&#xff0c;对需要的单号进行备注。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;并登录 步骤2&#xff1a;点击主界面左上角的“…
阅读更多...
iOS使用CoreText完成txt阅读器

iOS使用CoreText完成txt阅读器

CoreText是一个高效处理字符和字形转换和进行文字排版的框架&#xff0c;API基于C语言。 常见的CoreText类介绍 &#xff08;1&#xff09;、CFAttributedStringRef 属性字符串&#xff0c;用于存储需要绘制的文字字符和字符属性 &#xff08;2&#xff09;、CTFramesetterR…
阅读更多...
JVM学习之JVM概述

JVM学习之JVM概述

JVM的整体结构 Hotspot VM是目前市面上高性能虚拟机代表作之一 它采用解释器与即时编译器并存的架构 在今天&#xff0c;Java程序的运行性能已经达到了可以和C/C程序一较高下的地步 Java代码执行流程 具体图为 JVM架构模型 Java编译器输入的指令流基本上是一种基于 栈的指令…
阅读更多...
大创项目推荐 垃圾邮件(短信)分类算法实现 机器学习 深度学习

大创项目推荐 垃圾邮件(短信)分类算法实现 机器学习 深度学习

文章目录 0 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 垃圾邮件(短信)分类算…
阅读更多...
Github与Gitlab

Github与Gitlab

学习目标 能够使用GitHub创建远程仓库并使用能够安装部署GitLab服务器能够使用GitLab创建仓库并使用掌握CI/CD的概念掌握蓝绿部署, 滚动更新,灰度发布的概念 GitHub是目前最火的开源项目代码托管平台。它是基于web的Git仓库&#xff0c;提供公有仓库和私有仓库&#xff0c;但私…
阅读更多...
Amortized Bootstrapping of LWE：使用 BFV 打包处理

Amortized Bootstrapping of LWE：使用 BFV 打包处理

参考文献&#xff1a; [AP13] Alperin-Sheriff J, Peikert C. Practical bootstrapping in quasilinear time[C]//Annual Cryptology Conference. Berlin, Heidelberg: Springer Berlin Heidelberg, 2013: 1-20.[MS18] Micciancio D, Sorrell J. Ring packing and amortized F…
阅读更多...
下午好~ 我的论文【CV边角料】（第三期）

下午好~ 我的论文【CV边角料】（第三期）

文章目录 CV边角料Pixel ShuffleSENetCBAMGlobal Context Block (GC)Criss-Cross Attention modules (CC) CV边角料 Pixel Shuffle Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel Convolutional Neural Network pixelshuffle算法的实现流…
阅读更多...
初识GroovyShell

初识GroovyShell

文章目录 前言一、GroovyShell二、maven三、解决方案四、关键代码4.1 数据库配置表(pg)4.2 入参4.3 分页查询 总结 前言 项目背景&#xff1a;查询多个表的数据列表和详情&#xff0c;但不想创建过多的po、dao、resp等项目文件。 一、GroovyShell Apache Groovy是一种强大的…
阅读更多...
rabbitmq-windows安装使用-简易后台界面-修改密码

rabbitmq-windows安装使用-简易后台界面-修改密码

文章目录 1.下载2.安装3.安装 RabbitMQ4.后台访问5.修改密码 1.下载 将erlang运行时和rabbitmq-windows版本&#xff0c;上传在csdn&#xff0c;下载链接。https://download.csdn.net/download/m0_67316550/88633443 2.安装 右键&#xff0c;以管理员身份运行rabbitmq。启动…
阅读更多...
如何安装LUT预设？达芬奇/FCP/PR怎么安装LUT预设.cube格式文件的教程

如何安装LUT预设？达芬奇/FCP/PR怎么安装LUT预设.cube格式文件的教程

在下载的LUT调色预设压缩文件包中&#xff0c;通常两个包含不同格式的LUT文件&#xff1a; .cube 和 .xmp 包含的 .cube 文件几乎与主流的视频编辑和色彩校正软件兼容&#xff0c;并且还可以在 Adobe Photoshop 等一些照片应用程序中使用。如果主要是将这些 LUT 用于视频剪辑项…
阅读更多...
Redis-数据结构

Redis-数据结构

参考资料 极客时间Redis&#xff08;亚风&#xff09; Redis数据结构 SDS sds(Simple Dynamic String) 字符串接结构体: struct --attribute_- ((-_packed__)) sdshdr8{uint8_t len&#xff1b;/* buf已保祥的字符串字节数&#xff0c;不包含结束标示*/uint8_t alloc&#…
阅读更多...
day02-报表技术POI

day02-报表技术POI

1、基于模板导出列表数据 1.1、需求 按照以下样式导出excel 1.2、思路 首先准备一个excel模板&#xff0c;这个模板把复杂的样式和固定的内容先准备好并且放入到项目中&#xff0c;然后读取到模板后向里面放入数据。 1.3、实现 第一步&#xff1a;准备一个excel作为导出的…
阅读更多...
AI 编程助手 Copilot：从对话中分析程序性能

AI 编程助手 Copilot：从对话中分析程序性能

大家好&#xff0c;我是木川 一、介绍 GitHub Copilot 是 GitHub 和 OpenAI 合作开发的一个 AI 辅助编程工具 官网地址&#xff1a;https://github.com/features/copilot 官方文档&#xff1a;https://docs.github.com/copilot 分析程序性能在对话功能中有提到 二、安装 在 VSC…
阅读更多...
Ubuntu 常用命令之 ll 命令用法介绍

Ubuntu 常用命令之 ll 命令用法介绍

ll是ls -l的别名&#xff0c;用于在Ubuntu系统中列出目录的详细信息。ls命令用于列出目录内容&#xff0c;-l选项则以长格式显示&#xff0c;包括文件类型、权限、链接数、所有者、组、大小、最后修改时间以及文件或目录名。 这是ll命令的基本格式 ll [选项]... [文件]...这是…
阅读更多...
Halcon参考手册异常检测知识总结

Halcon参考手册异常检测知识总结

1.1异常检测介绍 本章将介绍如何使用基于深度学习的异常检测和全局上下文异常检测。通过这两种方法&#xff0c;我们想要检测图像是否包含异常(异常是指偏离正常的事物&#xff0c;未知的事物)。 异常检测或全局上下文异常检测模型学习无异常图像的共同特征。经过训练的模型将…
阅读更多...
JS中call()、apply()、bind()改变this指向的原理

JS中call()、apply()、bind()改变this指向的原理

大家如果想了解改变this指向的方法&#xff0c;大家可以阅读本人的这篇改变this指向的六种方法 大家有没有想过这三种方法是如何改变this指向的&#xff1f;我们可以自己写吗&#xff1f; 答案是&#xff1a;可以自己写的 让我为大家介绍一下吧&#xff01; 1.call()方法的原理…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发