vue页面中,通过接口获取json返回值,并导出到Excel中;
注意事项:
- 1、json中的key翻译成对应标题;
- 2、过滤掉json中不需要的字段;
1、接口返回的json:
css
{
"errcode": 0,
"data": {
"total": 3,
"items": [
{
"hospital": "医院1",
"department": "心内科",
"num": 10
},
{
"hospital": "医院2",
"department": "心内科",
"num": 4
},
{
"hospital": "医院3",
"department": "体检",
"num": 3
}
]
},
"errmsg": "成功"
}
2、安装 xlsx 库:
css
npm install xlsx
3、定义方法:
css
<template>
<div>
<button @click="handleExportXls">导出Excel</button>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
export default {
data() {
return {
titleMapping: { // key映射成对应的title
hospital: '医院',
department: '科室',
num: '数量',
},
excludedKeys: ['num'], // 需要过滤的key
};
},
methods: {
handleExportXls() {
console.log('导出到Excel')
try {
const res= await axios.get('YOUR_API_URL');
if (res.errcode == 0) {
console.log(res.data.items)
var chartList = res.data.items
console.log('数据长度:' + chartList.length)
const transformedData = res.data.items.map((item) => {
const transformedItem = {}
for (const key in item) {
this.excludedKeys.forEach((key) => delete item[key]) //过滤掉不需要的key
if (key in this.titleMapping) {
//key映射成对应的标题
transformedItem[this.titleMapping[key]] = item[key]
}
}
return transformedItem
})
this.exportToExcel(transformedData)
}
} catch (error) {
console.error(error);
}
},
exportToExcel(listData) {
const worksheet = XLSX.utils.json_to_sheet(listData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const excelBuffer = XLSX.write(workbook, {
bookType: 'xlsx',
type: 'array',
})
const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
const fileName = '报表.xlsx'
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// For IE
window.navigator.msSaveOrOpenBlob(data, fileName)
} else {
// For other browsers
const url = window.URL.createObjectURL(data)
const link = document.createElement('a')
link.href = url
link.download = fileName
link.click()
window.URL.revokeObjectURL(url)
}
},
}
};
</script>