Vue将json数据生成excel的解决办法
解决办法
其一方法,仅供参考:
<template>
<div>
<el-button @click="downloadExcel(jsonData, 'data.csv')">下载表格</el-button>
</div>
</template>
<script>
export default {
name: 'IndexView',
data() {
return {
jsonData: [
{Name: 'John', Age: 30, City: 'New York'},
{Name: 'Alice', Age: 25, City: 'San Francisco'},
{Name: 'Bob', Age: 35, City: 'Seattle'}
]
}
},
methods: {
downloadExcel(jsonData, fileName) {
let jsonStrData = this.jsonToCsvStrData(jsonData)
let csvData = new Blob([jsonStrData], {type: 'text/csv'})
let csvUrl = URL.createObjectURL(csvData)
let link = document.createElement('a')
link.href = csvUrl
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
},
computed: {
jsonToCsvStrData() {
return jsonData => `${Object.keys(jsonData).join(",")}\n` + jsonData.map(item => Object.values(item).join(',')).join('\n')
}
},
}
</script>
<style scoped>
</style>

浙公网安备 33010602011771号