vue多个数据不一样的表格导出到同一张excel里面

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

刚来公司第二天, 甩了个需求, 把两个不同表格的数据导出到同一个excel中 ........额,好吧

你要说,两个表格数据差不多, 直接合并数据导出就行:

async function getData() {
let data1 = await this.get1();
let data2 = await this.get2();
data3 = data1.concat(data2)
}

vue多个数据不一样的表格统一导出excel

废话不多说, 上图上代码:

1. 安装依赖

进入项目文件夹，安装 xlsx

npm install xlsx

2. vue页面代码: (随拿就用)

<template>
<div class="hello">
<h1>导出excel, 多个表格的数据导出到同一张excel, 两个sheel显示</h1>
<button @click="getExcel">导出excel</button>
</div>
</template><script>
import XLSX from 'xlsx' //引入xlsx
export default {
name: 'HelloWorld',
data() {
return {
msg: ''
}
},
mounted() {},
methods: {
// 导出excel, 多个表格的数据导出到同一张excel, 两个sheel显示
getExcel() {
// 表格数据1
let sheet1data = [
{ department: '行政部', count: 2 },
{ department: '前端部', count: 2 }
]
// 表格数据2
let sheet2data = [
{ name: '张三', do: '整理文件' },
{ name: '李四', do: '打印' }
]
// 修改数组对象中对象属性名, 因为属性都是英文名, 所以要匹配成中文, 这样excel导出的是中文属性名 -------start
let sheet1data_china = sheet1data.map((v) => {
return { 部门: v.department, 数量: v.count }
})
let sheet2data_china = sheet2data.map((v) => {
return { 姓名: v.name, 行为: v.do }
})
// 修改数组对象中对象属性名, 因为属性都是英文名, 所以要匹配成中文 -------end
var sheet1 = XLSX.utils.json_to_sheet(sheet1data_china) //json_to_sheet 将 JS 对象数组转换为工作表。 //aoa_to_sheet 将 JS 数据数组的数组转换为工作表。
var sheet2 = XLSX.utils.json_to_sheet(sheet2data_china) /* create a new blank workbook */
var wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, sheet1, '部门统计')
XLSX.utils.book_append_sheet(wb, sheet2, '行政部')
const workbookBlob = this.workbook2blob(wb) this.openDownloadDialog(workbookBlob, `部门统计.xlsx`)
},
// 将workbook装化成blob对象
workbook2blob(workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: 'xlsx',
// // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: 'binary'
}
var wbout = XLSX.write(workbook, wopts)
// 将字符串转ArrayBuffer
function s2ab(s) {
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
}
var blob = new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
})
return blob
}, // 将blob对象创建bloburl，然后用a标签实现弹出下载框
openDownloadDialog(blob, fileName) {
if (typeof blob == 'object' && blob instanceof Blob) {
blob = URL.createObjectURL(blob) // 创建blob地址
}
var aLink = document.createElement('a')
aLink.href = blob
// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
aLink.download = fileName || ''
var event
if (window.MouseEvent) event = new MouseEvent('click')
// 移动端
else {
event = document.createEvent('MouseEvents')
event.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
)
}
aLink.dispatchEvent(event)
}
}
}
</script>