前端实现表格下载+ant desgin vue

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

采故事的女孩

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

阅读量423

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/weixin_42416812/article/details/120490307

版权

这篇博客介绍了如何在Vue.js项目中结合Ant Design Vue库实现表格数据的下载功能。通过安装file-saver、xlsx和script-loader依赖，创建一个download按钮组件，并在组件中处理数据转换与下载触发。在页面中引入组件并获取所需数据，然后调用方法生成并下载表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考网上各位大佬

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

可参考大佬链接

1.downButton文件建index.vue


<template>
  <a-button type="primary" class="select-top tempDown" :loading="downloadLoading" @click="clickDown">
    表格下载
  </a-button>
</template>
<script>
export default {
  props: {
    downData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      downloadLoading: false,
    }
  },
  methods: {
    clickDown() {
      this.downloadLoading = true
      setTimeout(() => {
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel');
          const tHeader = this.downData.tHeader;
          const filterVal = this.downData.filterVal;
          const list = this.downData.tableExportData;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, this.downData.tableName);
        })
        this.downloadLoading = false
      }, 1000)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/common/css/common.less';
.select-top {
  margin-right: @mrg;
}
.tempDown {
  background-color: @TemplateDownload_btn;
  border: @border;
  /deep/a:hover {
    color: #fafcfd;
  }
  /deep/a {
    color: #eff3f7;
  }
}
</style>

2.需要使用的页面引入组件

data里面定义:
import { columns } from “./columns”
import buttonDown from “@/components/DownButton”
export default {
name: “index”,
components: {
buttonDown
},
data() {
return {
columns,
downData: {
tHeader: [],
filterVal: [],
tableExportData: [],
tableName: ‘xxx表格名称’,
}
}
}，

created() {
this.getDownData()
},
methods: {
getDownData() {
let tableQuery = {
Sorts: [‘creationTime desc’],
SortOrder: “desc”,
PageIndex: 1,
PageSize: 9999,
}
apiList(tableQuery).then(res => {
this.downData.tableExportData = res.data.rows
this.columns.map(v => {
this.downData.tHeader.push(v.title)
this.downData.filterVal.push(v.dataIndex)
})
})
},
}

Blob.js

/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*

最低0.47元/天解锁文章