excel导出一般后台可以实现，但是如果前台已经有了符合要求的数据，也可以在前端纯js导出。在操作excel方面，已经有很多库支持，本文介绍xlsx实现excel导出功能。
-
安装依赖
第一步我们要做的就是，需要安装三个依赖。
FileSaver.js是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的场景。xlsx就是生成excel必要的库。
// npm
cnpm install --save file-saver xlsx
cnpm install --save script-loader
-
下载js
第二步，我们需要额外下载两个jsBlob.js和Export2Excel.js，
在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
如果没有积分，可以在其github下载
-
引入js
第三步，接下来就需要引入这两个js文件，如果导出excel的业务场景比较多，可以挂载在main.js中，因为笔者的项目此类场景比较少，所以在对应的组件中再引用。
//导出excel
import Blob from '@/excel/Blob'
const { export_json_to_excel } = require('@/excel/Export2Excel');
Export2Excel.js 中引入Blob的路径也要相应修改。
require('script-loader!file-saver');
require('./Blob.js'); //改成相对路径
require('script-loader!xlsx/dist/xlsx.core.min');
-
使用方法
第四步，可以在组件中使用export_json_to_excel这个方法了，datalist属性就是是数据集，要和filterVal里的属性名要一一对应。
//导出的方法
exportExcel() {
require.ensure([], () => {
// 设置Excel的表格第一行的标题
const tHeader = ['日期','strut1长度', 'strut2长度'];
// 'date', 'struct1', 'struct2'对象的属性
const filterVal = [ 'date', 'strut1', 'strut2'];
// 数据集
const list = this.datalist;
const data = this.formatJson(filterVal, list);
// excel名称可自定义
const excelName = "excel名称";
export_json_to_excel(tHeader, data, excelName);
});
},
//格式化json
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
-
调整布局
第五步，如果出现导出的excel列宽太窄，可以自定义列宽，修改Export2Excel.js中的export_json_to_excel方法中ws['!cols']的属性了
export function export_json_to_excel(th, jsonData, defaultTitle) {
/* original data */
var data = jsonData;
data.unshift(th);
var ws_name = "SheetJS";
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
// 设置每列的宽度
ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100}];
/* 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'});
var title = defaultTitle || '列表'
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}
-
总结
此文只是简单的介绍了如何实现简单的excle导出功能，如果要实现更加复杂的excle布局或者样式，那就要研究Export2Excel.js了，以及xlsx的相关api，以后有时间再补充
