首页 |  我的博客 |  查看该博主内容分类 | 

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>
posted @ 2023-11-24 11:47  Z哎呀  阅读(232)  评论(0)    收藏  举报