vue导出Excel（三）

接上篇文章，需要用到Export2Excel、Blob等js文件提取码：s8ci

下面demo是把table的json数据导出为多个sheet的Excel，同时也是支持自定义列导出

找到Export2Excel.js，把下面代码复制到最后即可

export function export_json_to_excel_in_sheet(jsonData, defaultTitle) {var wb = new Workbook();for(let i=0;i<jsonData.length;i++){var ws_name = jsonData[i].sheetName;var ws = sheet_from_array_of_arrays(jsonData[i].data);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")
}

下面是demo，复制即可运行

<template><div><el-button type="primary" @click="export2Excel()">导出Excel</el-button></div>
</template><script>
export default {components: {},data() {return {jsonData: [],tableData: [{ index: 0, username: "张三", password: 333, age: 22 },{ index: 1, username: "李四", password: 444, age: 23 },],tableData2: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],tableData3: [{key: '1',name: 'John Brown',age: 32,tel: '0571-22098909',phone: 18889898989,address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',tel: '0571-22098333',phone: 18889898888,age: 42,address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',age: 32,tel: '0575-22098909',phone: 18900010002,address: 'Sidney No. 1 Lake Park',},{key: '4',name: 'Jim Red',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'London No. 2 Lake Park',},{key: '5',name: 'Jake White',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'Dublin No. 2 Lake Park',},],tableData4: [{"id": "10001","username": "杜甫","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"},{"id": "10002","username": "李白","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true},{"id": "10003","username": "王勃","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},{"id": "10004","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "666","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},{"id": "10005","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},{"id": "10006","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},{"id": "10007","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},{"id": "10008","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}],};},methods: {export2Excel() {this.jsonData = [];require.ensure([], () => {const {export_json_to_excel_in_sheet} = require("@/excel/Export2Excel");this.assemblyData(["索引", "用户名", "密码"],["index", "username", "password"],this.tableData,"模拟数据");this.assemblyData(["日期", "名称", "地址"],["date", "name", "address"],this.tableData2,"element数据");this.assemblyData(["索引", "用户名", "年龄", "电话", "手机", "地址"],["key", "name", "age", "tel", "phone", "address"],this.tableData3,"antdDesign数据");this.assemblyData(["索引", "用户名", "邮箱", "性别", "城市", "签名", "积分", "IP", "加入时间"],["id", "username", "email", "sex", "city", "sign", "experience", "ip", "joinTime"],this.tableData4,"layui数据");export_json_to_excel_in_sheet(this.jsonData, "用户列表");});},/*** 加入一个sheet调用此方法一次* fieldName    列名* filterVal    每列对应key* tableData    表格的json数组数据* sheetName    当前sheet的名称*/assemblyData(fieldName,filterVal,tableData,sheetName){let json = {sheetName};let data = tableData.map((v) => filterVal.map((j) => v[j]));data.unshift(fieldName);json.data = data;this.jsonData.push(json) }},
};
</script><style lang="scss" scoped>
</style>

vue导出Excel（三）相关推荐

vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
vue导出excel表的时候有多张图片
vue导出excel的时候多张图片遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
vue导出Excel表格全局函数（简洁明了）
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
vue导出excel加一个进度条_vue 实现Excel 导入导出功能
第一步:安装依赖使用npm: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 或使用yarn: ya ...
vue导出excel表格，使用xlsx-style自定义字体样式，字体颜色，合并单元格，单元格填充色
一.需要依赖 npm install xlsx-style --save "^0.8.13" npm install xlsx --save "^0.18.5" ...

vue导出Excel（三）

下面demo是把table的json数据导出为多个sheet的Excel，同时也是支持自定义列导出

vue导出Excel（三）相关推荐

最新文章

热门文章