最近项目有个需求,将页面中的table导出为excel文件。本来最初的想法的是将数据传输到后台,在使用apache的POI组件导出excel,但是当前项目的框架版本比较老,而且是自研框架,无法调用后台代码。所有这条路走不通,然后转为使用前端组件导出excel文件。
这里面前端用的是Vue框架+ElementUI。根据网上搜索的资料,都需要引入两个依赖,分别为xlsx和file-saver,然后网上写的都是通过npm的方式下载依赖,但是我压根就看不懂(最近才开始接触Vue)。
所以请教了一下公司的前端同事,装了一个NodeJs,然后通过命令行下载该依赖。
下载依赖(js文件):
(1)首先在桌面新建一个文件夹,并进入该文件夹
(2)打开power shell,执行命令 npm init
(3)执行命令 npm -i xlsx ,执行完成后会发现 在 npm\node_modules\xlsx 目录下已经下载好了xlsx.js 文件
(4)执行命令 npm -i file-saver ,执行完成后会发现在 npm\node_modules\file-saver\dist 目录下已经下载好了FileSaver.js 文件
html页面引用依赖:
(5)最后把这两个文件通过
<script type="text/javascript" src="/assets/js/FileSaver.js"></script>
<script type="text/javascript" src="/assets/js/xlsx.js"></script>
引入到html文件中。
定义变量(我也不知道是干嘛的):
(6)在script标签内 定义以下列代码
Vue.prototype.$XLSX = XLSX;
如下图所示:
在html文件中定义table(声明id):
编写导出excel的JavaScript代码:
var vm = new Vue({
el: '#app',
data() {
return {
tableDataList: [],
total: 0,
}
},
methods: {
//导出excel文件
exportExcel() {
//根据id获取table
let tables = document.getElementById("exportTable");
//固定写法
let wb = this.$XLSX.utils.table_to_sheet(tables, {raw: true});
for (var i = 0; i < 11; i++) {
//设置前10列宽度为130
wb["!cols"][i] = {
wpx: 130
}
}
//设置文字颜色、居中显示
for (const key in wb) {
if (key.indexOf('!') === -1 && wb[key].v) {
wb[key].s = {
font: { //字体设置
sz: 13,
bold: false,
color: {
rgb: '000000' //十六进制,不带#
}
},
alignment: { //文字居中
horizontal: 'center',
vertical: 'center',
wrap_text: true
}
}
}
}
//设置sheet名称,将为转为blob
var filedata = this.sheet2blob(wb, "铅封运用完成率详情");
//设置下载文件名称,并下载
this.openDownloadDialog(filedata, "铅封运用完成率详情.xlsx")
},
sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
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;
}
return blob;
},
//设置下载文件名称,并下载
openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
},
handleSizeChange(val) {
pageSize = val;
console.log('每页 ' + val + '条');
var factory_id = parent.window.factory_id;
var line_code = parent.window.line_code;
var date_from = parent.window.date_from;
var date_to = parent.window.date_to;
this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
}, handleCurrentChange(val) {
currentPage = val;
var factory_id = parent.window.factory_id;
var line_code = parent.window.line_code;
var date_from = parent.window.date_from;
var date_to = parent.window.date_to;
this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
console.log('当前页: ' + val);
},
searchModData(factory_id, line_code, date_from, date_to) {
parent.axios.post("/api/query/W030Query/action/getW037Data", {
aux: {
factory_id: factory_id,
line_code: line_code,
date_from: date_from,
date_to: date_to,
pageSize: pageSize,
currentPage: currentPage
}
}, {
headers: {
'content-type': 'application/json'
}
}).then(response => {
var res = response.data.data;
this.tableDataList = res.dataList;
this.total = res.total;
});
}, tableCellClick(row, column, cell, event) {
}, timeStyle(row, column, rowIndex, columnIndex) {
}, tableCellClassName({row, column, rowIndex, columnIndex}) {
// 把每一行的索引放进row
row.index = rowIndex
column.index = columnIndex;
}, objectSpanMethod({row, column, rowIndex, columnIndex}) {
}, open(row) {
}
}, created() {
var factory_id = parent.window.factory_id;
var line_code = parent.window.line_code;
var date_from = parent.window.date_from;
var date_to = parent.window.date_to;
this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
},
});
大部分代码全是从网上扒过来的,都是非是用import关键字引入的。
主要逻辑:
(1)进入页面先渲染table表格
(2)点击导出按钮,执行exportExcel方法
(3)根据id获取table对象,然后设置excel的一些样式,最后导出。