vue + element ui 实现前端导出 适合新手

安装依赖

npm install -S file-saver xlsx

npm install -D script-loader

如果下载失败 就使用cnpm下载

cnpm install -S file-saver xlsx

cnpm install -D script-loader

下载两个js文件 Blob.js 和 Export2Excel.js 在github能下载到
在src目录下新建excel（可自定义）文件夹,将两个js文件放在这个文件夹下

因为我的两个文件在同一个目录，所以改下Blob的路径

创建导出按钮

导出

创建导出方法，这里的思路就是将查出来的数据导出来
这里是获取数据的方法

 getDataList () {
        this.dataListLoading = true
        if (page != null && page > 0) {
          this.pageIndex = page
        }
        this.$http({
          url: this.$http.adornUrl('/generator/goods/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'value': this.dataForm.value,
            'min': this.dataForm.min,
            'max': this.dataForm.max,
            'sort': this.dataForm.sort
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },

然后是导出的方法

 // 导出
      exportData () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/generator/goods/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10000000,
            'key': this.dataForm.key,
            'value': this.dataForm.value,
            'min': this.dataForm.min,
            'max': this.dataForm.max,
            'sort': this.dataForm.sort
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
            this.exportExcel(data.page.list)
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      exportExcel (dataList) {
        var filename = '商品列表' + '-'
        filename += this.getNowDate()

        require.ensure([], () => {
          const { export_json_to_excel } = require('@/excel/Export2Excel')
          const tHeader = [
          // 这里写的是导出表的列名
            '商品名',
            '介绍',
            '价格',
            '库存'
          ]
          const filterVal = [
          // 这里是获取到数据对应的字段
            'name',
            'intro',
            'price',
            'num'
          ]
          const data = this.formatJson(filterVal, dataList)
          // tHeader 代表导出表的列名  data 代表数据   filename 代表导出表的名字
          export_json_to_excel(tHeader, data, filename)
          this.dataListLoading = false
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      // 获取当前时间
      getNowDate () {
        var date = new Date()
        var sign1 = '-'
        var sign2 = ':'
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var minutes = date.getMinutes()
        var seconds = date.getSeconds()
        // 如果时间是个位数就在前面加 0
        if (month >= 0 && month < 10) {
          month = '0' + month
        }
        if (day >= 0 && day < 10) {
          day = '0' + day
        }
        if (hour >= 0 && hour < 10) {
          hour = '0' + hour
        }
        if (minutes >= 0 && minutes < 10) {
          minutes = '0' + minutes
        }
        if (seconds >= 0 && seconds < 10) {
          seconds = '0' + seconds
        }
        // 拼接导出的表名
        var currentdate =
        year + sign1 + month + sign1 + day + sign1 + hour + sign2 + minutes + sign2 + seconds
        return currentdate
      },

最终效果



自己慢慢写的 希望能帮助到大家 有问题请留言