Vue中将列表数据导出为EXCEL表格

项目中刚好有个需求让前端在页面上增加一个按钮,用户点击就可以将列表中的数据导出为Excel表格,在网上查了一下方法,大体思路都是需要安装三个插件以及拷贝两个文件,然后在页面中写入逻辑代码,感觉挺复杂的,所以研究了一下,总结了一个简单版本的解决方案。 1.安装XLSX npm安装 npm install xlsx --save 2.封装工具 可以在项目的utils文件夹中新建一个xlsx.js用来存放这个工具函数 // 下载excel功能 import XLSX from 'xlsx' /** * @param dataList 表格数据内容 array * @param fileName 文件标题。必须以 .xlsx结尾 */ export const downloadXlsx = (dataList, fileName) => { // 参考数据 // dataList = [ // ['姓名', '性别', '年龄', '注册时间'], // ['张三', '男', 18, new Date()], // ['李四', '女', 22, new Date()] // ]; const stringToBuff = str => { var buf = new ArrayBuffer(str.length) var view = new Uint8Array(buf) for (var i = 0; i !== str.length; ++i) { view[i] = str.charCodeAt(i) & 0xff } return buf } // 创建表格 let workbook = XLSX.utils.book_new() let worksheet = XLSX.utils.aoa_to_sheet(dataList) XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1') // 创建二进制对象写入转换好的字节流 let xlsxBlob = new Blob( [ stringToBuff( XLSX.write(workbook, { bookType: 'xlsx', bookSST: false, type: 'binary' }) ) ], { type: '' } ) const a = document.createElement('a') // 利用URL.createObjectURL()方法为a元素生成blob URL a.href = URL.createObjectURL(xlsxBlob) // 创建对象超链接 a.download = fileName a.click() } 3.绑定事件 首先需要在页面中引入这个工具 import { downloadXlsx } from "../../utils/xlsx"; 将触发代码写到onClickDown方法中 onClickDown() { let datalist = []; datalist.push([ "Uin", "总数", "平均码率", "码率<1k", "码率1k-1.5k", "码率1.5k-2k", "码率2k-2.5k", "码率2.5k-3k", "码率>3k" ]); this.list.forEach(item => { datalist.push([ item.uin, item.videoBitrateTotalCount, item.videoBitrateTotalAverage, item.videoBitrate1000Count, item.videoBitrate1500Count, item.videoBitrate2000Count, item.videoBitrate2500Count, item.videoBitrate3000Count, item.videoBitrateMore3000Count ]); }); downloadXlsx(datalist, "Uni数据统计.xlsx"); } 需要注意的一点是downloadXlsx的第二参数是导出文件的名字,这里的名字必须以.xlsx结尾才可以。 接下来就是测试效果,结果自然是完美实现。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):