VUE

2024-07-08 07:57| 来源: 网络整理| 查看: 265

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，以后有时间再补充

【本文地址】

公司简介

联系我们