vue导出数据为数组对象但对象内又包含数据如何导出excel
可以使用第三方库xlsx来将数组对象导出为Excel文件。
首先,需要安装xlsx库:
npm install xlsx --save
然后,在需要导出Excel的组件中引入xlsx库:
import XLSX from 'xlsx'
接着,在需要导出Excel的方法中,将数组对象转换为工作簿(Workbook):
// 将数组对象转换为工作簿
const worksheet = XLSX.utils.json_to_sheet(data)
// 将工作簿添加到工作簿集合(Workbook)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
其中,data是需要导出为Excel的数组对象,worksheet是将数组对象转换为的工作簿,workbook是工作簿集合,Sheet1是工作簿的名称。
最后,将工作簿转换为Excel文件并下载:
// 将工作簿转换为Excel文件
const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })
// 下载Excel文件
const fileName = 'data.xlsx'
const downloadLink = document.createElement('a')
downloadLink.href = URL.createObjectURL(new Blob([s2ab(excelFile)], { type: 'application/octet-stream' }))
downloadLink.download = fileName
downloadLink.click()
// 将二进制数据转换为字节数组
function s2ab(s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i < s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF
}
return buf
}
其中,excelFile是将工作簿转换为的Excel文件,fileName是Excel文件的名称,downloadLink是用于下载Excel文件的链接。
完整的代码如下:
<template>
<button @click="exportExcel">导出Excel</button>
</template>
<script>
import XLSX from 'xlsx'
export default {
methods: {
exportExcel() {
// 导出数据
const data = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 30, gender: '女' },
{ name: '王五', age: 40, gender: '男' }
]
// 将数组对象转换为工作簿
const worksheet = XLSX.utils.json_to_sheet(data)
// 将工作簿添加到工作簿集合(Workbook)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
// 将工作簿转换为Excel文件
const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })
// 下载Excel文件
const fileName = 'data.xlsx'
const downloadLink = document.createElement('a')
downloadLink.href = URL.createObjectURL(new Blob([s2ab(excelFile)], { type: 'application/octet-stream' }))
downloadLink.download = fileName
downloadLink.click()
}
}
}
// 将二进制数据转换为字节数组
function s2ab(s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i < s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF
}
return buf
}
</script>
``
原文地址: https://www.cveoy.top/t/topic/hraL 著作权归作者所有。请勿转载和采集!