vue中导出excel

最新推荐文章于 2025-02-20 18:05:51 发布

liuhua_2323

最新推荐文章于 2025-02-20 18:05:51 发布

阅读量541

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/liuhua_2323/article/details/105480382

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

最近有一个需求，需要支持导入导出excel。导入嘛，没多想，直接调用了公司封装好了轮子，嗯，挺好用，三步就搞定了，但是导出，我找了又找，没有在公司的组件库中发现蛛丝马迹。我就去找了一波后端，由于版本上线的原因，后台忙不过来。我就花了一下午自己去鼓捣这个事情。。。搞了半小时，只有思路还是无从下手，忽然发现vue-element-admin这个后台管理系统中好像有这个东西，就去研究了一波。

在此处也给大家安利一下vue-element-admin里面功能实现比较完整，大家可以去里面找找思路。

话不多说，直接开整。

1.安装依赖：

 npm install -S file-saver xlsx
 npm install -S xlsx
 npm install -D script-loader

2.创建一个文件夹存放必须的文件：

这个Export2Excel.js是必须的，我把文件放在末尾，大家也可以直接去vue-element-admin拷贝

3.我这个还引用了 import { parseTime } from '@/utils' ，文件大家去vue-element-admin复制吧，我这里就不提供了，大家直接把这个文件夹拷贝下来就可以了

4.好了，万事俱备，只欠东风。开始导出

核心代码如下：

<script>
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      list: null,
      filename: '设备',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  methods: {
    loadData(queryParams) {
      return new Promise((resolve, reject) => {
        this.$api['Device/Tool/GetList'](queryParams)
          .then(resData => {
            // 把我们请求的数据赋值给list
            this.list = resData.records
            resolve(resData)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
   
    handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        console.log(excel)
        // 设置表头
        const tHeader = ['大类', '小类', '编号', '设备名称', '负责人', '负责人电话', '操作人', '操作人电话', '性质', '设备用处', '项目部']
        // 字段值
        const filterVal = ['bigTypeName', 'smallTypeName', 'number', 'deviceName', 'principal', 'principalPhone', 'operator', 'operatorPhone', 'natureCode', 'deviceUse', 'departmentName']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

然后，算了，Export2Excel你还是去拷贝吧。我提供给大家一个快速通道。

https://github.com/PanJiaChen/vue-element-admin

最后，如果报错，请注意版本问题：

我这里用的是：

   "file-saver": "1.3.3",

   "xlsx": "0.14.1"

   "script-loader": "0.7.2",

OKOK，就这样简单说明一下。不懂的，还有疑问的小伙伴直接去看一波vue-element-admin里面是如何操作的。