ant-design中点击按钮下载a-table中的数据

最新推荐文章于 2024-07-22 16:06:14 发布

weixin_45093753

最新推荐文章于 2024-07-22 16:06:14 发布

阅读量1.1k

点赞数

文章标签： js vue

本文链接：https://blog.csdn.net/weixin_45093753/article/details/118762364

版权

思路

使用json2csv将后台json数据转化为csv格式数据

采用创建Blob（二进制大对象）的方式来存放缓存数据；生成下载链接；

创建一个a标签，设置href和download属性

触发a标签的点击事件实现下载

实现如下

表格

 <a-table
   size="default"
   rowKey="index"
   :columns="columnsNoSort"
   :data-source="sortList"
   :pagination="pagination"
   :loading="loading"
   :scroll="{ x: 1000 }"
 >
 </a-table>

按钮

<a-button
    type="primary"
    icon="download"
    :disabled="!$auth('lineitem.edit')"
    @click="derive">导出</a-button>

点击按钮导出数据的方法

    derive () {
      const Parser = require('json2csv').Parser
      const fields = []
      this.columnsNoSort.map(col => {
        if (col.title && col.key) {
          const obj = {
            label: col.title, // 表头名称
            value: col.key // 表取值字段key
          }
          fields.push(obj)
        }
      })
      const fileName = '表格数据导出_' + new Date().toLocaleString('zh-CN')
      const json2csvParser = new Parser({ fields })
      const result = json2csvParser.parse(this.sortList)
      const blob = new Blob(['\ufeff' + result], { type: 'text/csv' })
      const a = document.createElement('a')
      a.setAttribute('href', URL.createObjectURL(blob))
      a.setAttribute('download', `${fileName}.csv`)
      a.click()
    },