vue+element_ui纯前端下载csv文件
纯前端实现csv格式文件下载,也可以从后端获取数据来实现。<template><div><el-button type="mini" @click="handleDownload()">下载</el-button></div></template><script>export def...
·
纯前端实现csv格式文件下载,也可以从后端获取数据来实现。
<template>
<div>
<el-button type="mini" @click="handleDownload()">下载</el-button>
</div>
</template>
<script>
export default {
data () {
},
methods: {
handleDownload () {
// 未完成
let thiz = this
let loading = thiz.$loading({
lock: true,
text: '下载中,请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// values可以从后端获取数据
var values = ['aaa','bbb','ccc','ddd','eee']
// 列标题,逗号隔开,每一个逗号就是隔开一个单元格
let str = ``
// 增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < values.length; i++) {
str += values[i] + ','
}
// 一个回车('\n')表示一行数据
str += '\n'
// encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
// 通过创建a标签实现
let link = document.createElement('a')
link.href = uri
// 对下载的文件命名
link.download = obj.dataSubjectId + '.csv'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
loading.close()
}
}
}
</script>
<style lang="scss" scoped>
</style>
更多推荐



所有评论(0)