vue 实现Excel 导出
前言
数据表格的导出,是实际开发的常见功能,前后端都可以实现表格导出,讲解自己在用的一种。
获取数据源,可以通过后端接口实现,也可以利用分页查询的表格接口来实现。
处理数据,对excel表格的表头(最上面一行)表格数据是一个二维数组对应起来的,表格文件名字。
利用第三方包构建Excel,vue-element-admin 是提供了文档的,可以根据实际情况更改。
实现
官方文档
1.下包,在工具文件引入第三方工具包(构建Excel表格),体积大使用的时候使用懒加载
由于 Export2Excel
不仅依赖js-xlsx
还依赖file-saver
和script-loader
。
npm install xlsx file-saver -S
npm install script-loader -S -D
新建文件在src/vendor/Export2Excel.js 代码如下
/* eslint-disable */
import { saveAs } from 'file-saver'
import * as 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.innerTextif (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 || 1colspan = colspan || 1ranges.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 += 1462var 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 = Rif (range.s.c > C) range.s.c = Cif (range.e.r < R) range.e.r = Rif (range.e.c < C) range.e.c = Cvar cell = {v: data[R][C]}if (cell.v == null) continuevar 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) & 0xffreturn 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.来到需要导出的页面。加一个导出按钮
<el-buttontype="warning"plainicon="el-icon-download"size="mini"style="float: right; margin-right: 15px"@click="exportExcel">导出设备</el-button>
3.来到methods中处理数据,构建Excel表格
// 导出的点击事件exportExcel() {import('@/vendor/Export2Excel').then(async (excel) => {// 一次性查出所有数据const res = await eqfirinquire(this.pageInfo)console.log('导出数据', res.data.list)// 用一个数组接收const list = res.data.list
// 准备中英文转换的数组const userRelations = {设备名称: 'deviceName',设备类型: 'equipmentType',序列号: 'deviceSerial',所属单位: 'company',在线状态: 'netStatus',设备状态: 'deviceStatus',设备id: 'deviceId'}
// 要弄出一个表头,也就是弄到上面对应的中文const header = Object.keys(userRelations)
// 弄出一个对应的内容(必须是二维数组)// 内容有多少个就要产生多少个一样的数组,所以用mapconst data = list.map((v) => {// 准备数组const arr = []// 遍历header(因为要保证表头有多少个才取出多少个属性)for (const key in userRelations) {// 得到英文keyconst enKey = userRelations[key]// 每一条数据构建都会通过这里 不需要替换就把这个注释掉,用下面的// 使用全部过滤器,枚举if (key === '在线状态') {arr.push(StateukeeperType(v[enKey]))} else {// 取出对应的值,加到数组里arr.push(v[enKey])}// 这个是你的表格里面没有像状态 0 1 (这是后端返回来的数据)不用替换成中文就直接用下面的// arr.push(v[enKey])}return arr})
// 表头excel.export_json_to_excel({header, // 表头 必填data, // 具体数据 必填filename: '设备表', // Excel文件名字非必填autoWidth: true, // 是否自适应列宽非必填bookType: 'xlsx' // 格式非必填})})}
细节
我这里的数据来源是表格分页查询接口,第一次进到页面时会调用一次,会把总数给total,第二次就可以查出全部数据了,
如果在打包的过程中报一个为空的报错,追踪报错是在本地代码中的xlsx构建这一行,可能是vue3 和引入xlsx的问题,改一下引入方式就可以了。import * as XLSX from 'xlsx',报错如下图。
处理数据时有一个全局过滤器枚举的造作可以不用管,后期主页博客有,不需要状态转成中文就直接把上面注释掉,用下面的。直接复制要看一下
// 原来的引入方式可能会报错
// import XLSX from 'xlsx'
// 新的引入方式
import * as XLSX from 'xlsx'
总结:
经过这一趟流程下来相信你也对 vue 实现Excel 导出 有了初步的深刻印象,但在实际开发中我们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕
vue 实现Excel 导出相关推荐
- vue之Excel导出和导入
vue之Excel导出和导入 vue之Excel导出和导入 Excel导入 Excel导出 Excel多级表头导出 vue之Excel导出和导入 Excel导入 注意:多级表头的Excel导出排版出现 ...
- 基于vue 实现 excel导出导入功能
第一步下包 excel导入导出功能需要我们下载哪些包? 在vue-element-admin中有着详细的文档查看: Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js ...
- Vue 项目excel导出功能
一.思路 前端主导(工作大量在前端) 二.新建文件夹及文件 新建src/vendor/export2Excel.js 示例代码:示例地址 /* eslint-disable */ import { s ...
- vue中excel导出功能
将vue-element-admin中的src/vendor/export2Excel复制到本项目中,直接使用 插件包位于src/vendor/export2Excel中,采用的是按需引入的方式 什么 ...
- VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
- vue将数据导出到excel
vue将数据导出到excel 最近做vue项目使用到导出数据到excel的功能,就想着在这里记录一下,就当是一个笔记 在vue项目中导出数据到excel 第一步安装依赖 cnpm install fi ...
- vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...
- 【工具】vue excel导出
本文中的excel导出工具取自花裤衩的https://gitee.com/panjiachen/vue-element-admin 环境: vue@2.6.12 element-ui@2.15.5 f ...
- vue中使用excel导出,详细步骤
导出: 下载插件 cnpm install vue-json-excel -S// 导出图表 npm install vue-json-excel -S// 导出图表 在main.js中配置插件 im ...
最新文章
- CoAP 协议解析说明(转)
- 我和freelancer不得不说的故事5 --- 心理落差
- jquery.each读取json数据
- C++类成员的初始化
- 谷歌:. apk 成为历史!
- oracle出错如何备份数据,Oracle数据库备份失败, 出错代码:0xe0001402
- 动态切换tableView中的cell的种类
- Python列表中数据插入数据库
- uboot驱动模型(DM)分析(一)
- 字符串进阶——谈谈后缀全家桶(1) 后缀树
- PRTR论文代码解读
- 三菱FX5U常见问题解析
- 安装Oracle XE 18c
- 首都经贸大学计算机科学与技术专业,河北经贸大学经济管理学院的计算机科学与技术专业怎么样啊...
- python画三角形
- 时间复杂度空间复杂度分析
- (二)使用数组长度实现ADT bag(java)
- 学生成绩管理java心得体会_如何用java实现学生成绩管理界面
- pytorch加载语音类自定义数据集
- 动态分区分配算法实现_阿里云上利用virtiope+colinux实现linux系统盘动态无损多分区...