1、页面结构:使用element-ui table表格 选择使用 Checkbox模板。
2、安装插件
npm install xlsx file-saver -S
3、使用的组件或js引入
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
4、新建js接受两个值( List ,name) ,直接复制查看
list = 导出数据
name = 导出数据表名称
import FileSaver from 'file-saver'; import XLSX from 'xlsx';const exportExcel = { exportExcel(List,name) { console.log(keyList) var wopts = { bookType: 'xlsx', bookSST: true, type: 'binary' }; var workBook = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} }; workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(List); let excelName = name +'.xlsx' FileSaver.saveAs(new Blob([exportExcel.changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' }), excelName) }, changeData(s) { if (typeof ArrayBuffer !== 'undefined') { 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; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } }, } export default exportExcel
5、组件中使用
需注意:XLSX对象接收一个数组 需要在组件中处理好数据传给js文件定义好的方法直接使用
接受数组格式(key为表头):
引用js:import exportExcel from '../../utils/exportExcel.js'
执行导出按钮(val为选中数据的row)
exportExcel(val){ let keyLisst = [] for(let item in val){ keyLisst.push( { '商品名称':val[item].name, '价格与规格':val[item].guige, '线上库存':val[item].price, '剩余库存':val[item].price, '销量':val[item].xiaoliang, '状态':val[item].stuats } ) } exportExcel.exportExcel(keyLisst,this.$route.meta.title) }
6、导出数据表