Export2Excel--Excel导出功能

文章目录

1. 安装依赖
2. 参数
3. 引入js文件
4. 页面调用方法示例

1. 安装依赖

Export2Excel依赖js-xlsx、file-saver和script-loader。

安装命令：

npm install xlsx file-saver -S
npm install script-loader -S -D

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: tHeader, //表头 必填data, //具体数据 必填filename: 'excel-list', //非必填autoWidth: true, //非必填bookType: 'xlsx' //非必填})
})

2. 参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

3. 引入js文件

src/utils/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 = "Sheet1";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}`);
}

4. 页面调用方法示例

Log.vue

导出日志示例

 methods: {//导出组局信息exportUsers(exportList) {import("../../../utils/Export2Excel").then((excel) => {// 设置导出表格的头部const tHeader = ["日志序号","接口名称","接口参数","操作时间","操作人","操作者ip地址","状态","日志描述",];// 将要导出的数据进行一个过滤/*** 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段*/const data = exportList.map((item, index) => {return [index + 1,item.implName,item.param,item.operateTime,item.username,item.ipAddress,item.isSuccess,item.operateDesc,];});// 调用我们封装好的方法进行导出Excelexcel.export_json_to_excel({// 导出的头部header: tHeader,// 导出的内容data,// 导出的文件名称filename: "日志列表",// 导出的表格宽度是否自动autoWidth: true,// 导出文件的后缀类型bookType: "xlsx",})});},handleExport() {this.$confirm("是否确认导出当前所有日志?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.exportLoading = true;request({url: "/log/export",method: "post",data: {implName: this.query.implName,username: this.query.username,ipAddress: this.query.ipAddress,isSuccess: this.query.isSuccess,},}).then((res) => {this.exportUsers(res.data.data);}).then(() => {this.$message.success("导出成功");this.exportLoading = false;}).catch((err) => {this.exportLoading = false;this.$message.error("导出异常");});})},
},

参考：vue-element-admin - Excel 导出

Export2Excel--Excel导出功能相关推荐

如何在 Asp.Net Core 实现 Excel 导出功能
在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨论下如何使 ...
根据children动态复杂表头excel导出_Java高级特性-注解：注解实现Excel导出功能
注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟是框架的事,我们也能用好注解吗? 的确,我们很少有机会自己写注 ...
java数据导出ex_Java高级特性注解：注解实现Excel导出功能
作者:JerryWu来源:SegmentFault 思否社区注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟 ...
Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）
Angular导出功能(excel导出功能.文件数据流导出功能.图片的下载导出功能) 场景1:(直接返回网络地址进行导出的excel) 后台返回的是 : "http://192.168.0. ...
java Excel导出功能之不固定列表格
背景:考勤周期为本月19号至上月20号,则每个月考勤周期表的列是动态变化的.所有数据显示和excel导出功能都需要动态的进行处理. 显示格式如下图前端 checkin.jsp<%@ page ...
Excel导出功能超时解决方案 -- 异步处理
Excel导出功能超时解决方案 -- 异步处理参考文章: (1)Excel导出功能超时解决方案 -- 异步处理 (2)https://www.cnblogs.com/nightOfStreet/p/ ...
解决通过调用后台接口实现Excel导出功能，后台返回数据乱码的问题
解决通过调用后台接口实现Excel导出功能,后台返回数据乱码的问题问题如下: 这导致我虽然成功导出文件,但文件受损打不开解决方案如下: 在调用接口加入: // 导出 export function ...
简便的Excel导出功能
Excel导出功能在我们开发项目的时候,难免会遇到客户需要将表格数据导出到Excel中,进行打印或者留存,于是Java对Excel.word的操作都必不可少. 关于这些操作Excel目前有两个框架, ...
ThingsBoard CE添加Excel导出功能-优化篇
文章目录前言 rpc,static,alarm去掉图例中的启用数据导出选项效果前言如何添加Excel导出功能请跳转上一篇ThingsBoard CE数据导出excel,这篇做优化. 按照Thi ...
基于easyexcel的MySQL百万级别数据的excel导出功能
前言最近我做过一个MySQL百万级别数据的excel导出功能,已经正常上线使用了. 这个功能挺有意思的,里面需要注意的细节还真不少,现在拿出来跟大家分享一下,希望对你会有所帮助. 原始需求:用户在U ...

Export2Excel--Excel导出功能

文章目录

1. 安装依赖

2. 参数

3. 引入js文件

4. 页面调用方法示例

Export2Excel--Excel导出功能相关推荐

最新文章

热门文章