Vue 项目excel导出功能

一、思路

前端主导（工作大量在前端）

二、新建文件夹及文件

新建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}`);
}

三、安装依赖

npm install file-saver script-loader xlsx --save

四、excel导出按钮添加点击事件

回调函数如下

import('@/vendor/Export2Excel').then(excel => {// excel表示导入的模块对象console.log(excel)excel.export_json_to_excel({header: ['姓名', '工资'], // 表头 必填data: [['刘备', 100],['关羽', 500]], // 具体数据 必填filename: 'excel-list', // 文件名称autoWidth: true, // 宽度是否自适应bookType: 'xlsx' // 生成的文件类型})
})

以上代码表示:

当我们正式点击导出按钮之后，才去加载vendor文件夹中的Export2Excel模块
import方法执行完毕返回的是一个promise对象，在then方法中我们可以拿到使用的模块对象
重点关注data的配置部分，我们发现它需要一个严格的二维数组

Excel导出参数说明

五、导出xlsx文件

效果图

Vue 项目excel导出功能相关推荐

vue中excel导出功能
将vue-element-admin中的src/vendor/export2Excel复制到本项目中,直接使用插件包位于src/vendor/export2Excel中,采用的是按需引入的方式什么 ...
vue项目的导出功能
说到导出功能有很多种方式,今天我也来写一种,纯js的导出功能,可用于项目当中,可用于项目当中,可用于项目当中.重要的事情说三遍,现在开始 let url = window.URL.createObje ...
基于easyexcel的MySQL百万级别数据的excel导出功能
前言最近我做过一个MySQL百万级别数据的excel导出功能,已经正常上线使用了. 这个功能挺有意思的,里面需要注意的细节还真不少,现在拿出来跟大家分享一下,希望对你会有所帮助. 原始需求:用户在U ...
根据children动态复杂表头excel导出_Java高级特性-注解：注解实现Excel导出功能
注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟是框架的事,我们也能用好注解吗? 的确,我们很少有机会自己写注 ...
java数据导出ex_Java高级特性注解：注解实现Excel导出功能
作者:JerryWu来源:SegmentFault 思否社区注解是 Java 的一个高级特性,Spring 更是以注解为基础,发展出一套"注解驱动编程". 这听起来高大上,但毕竟 ...
vue 实现Excel 导出
前言数据表格的导出,是实际开发的常见功能,前后端都可以实现表格导出,讲解自己在用的一种. 获取数据源,可以通过后端接口实现,也可以利用分页查询的表格接口来实现. 处理数据,对excel表格的表头(最 ...
简便的Excel导出功能
Excel导出功能在我们开发项目的时候,难免会遇到客户需要将表格数据导出到Excel中,进行打印或者留存,于是Java对Excel.word的操作都必不可少. 关于这些操作Excel目前有两个框架, ...
vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
如何在 Asp.Net Core 实现 Excel 导出功能
在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨论下如何使 ...

Vue 项目excel导出功能

一、思路

二、新建文件夹及文件

三、安装依赖

四、excel导出按钮添加点击事件

五、导出xlsx文件

Vue 项目excel导出功能相关推荐

最新文章

热门文章