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)