1.npm install xlsx
<template>
<div class="hello">
<h1 >{{ msg }}</h1>
<div @click="exportXls">下载</div>
</div>
</template>
<script>
import XLSX from 'xlsx';
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
console.log("XLSX" + JSON.stringify(XLSX));
},
methods:{
exportXls(){
const sheet1Data =[{name:'周周',age:24},{name:'张张',age:24}]
const sheet2Data =[{name:'周周',jobs:'开发'},{name:'张张',jobs:'产品经理'}]
let sheet1data_china = sheet1Data.map((v) => {
return { 姓名: v.name, 年龄: v.age }
})
let sheet2data_china = sheet2Data.map((v) => {
return { 姓名: v.name, 职位: v.jobs }
})
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)
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`)
},
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
引用 :vue多个数据不一样的表格导出到同一张excel里面 - 码农教程
项目运行中控制台出现下方报错信息