vue實現前端導出excel

一、安裝依賴

$ `npm install -S xlsx`
$ `npm install -S file-saver`
以上兩種合併簡寫成：$ `npm install -S file-saver xlsx`
$ `npm install -D script-loader`

二、添加js文件

src下創建excel（自定義）文件夾放入Blob.js 和 export2Excel.js

鏈接：https://pan.baidu.com/s/1Hp66lcrl8nYJUTSUyXY5hA
提取碼：w1fz

三、修改配置文件

找自己項目中resolve的alias中加入
有的是在build下的 webpack.base/conf.js，我的是在項目下的idea.config.js(Ant-Design-Pro)

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'config': resolve('config'),
      '@': resolve('src'),
      '@views': resolve('src/views'),
      '@comp': resolve('src/components'),
      '@core': resolve('src/core'),
      '@utils': resolve('src/utils'),
      '@entry': resolve('src/entry'),
      '@router': resolve('src/router'),
      '@store': resolve('src/store'),
      'excel': path.resolve(__dirname, '../src/excel'), //新增這一行
    }
  },

四、代碼實現

//按鈕
 <a-button @click="downloadExcel" type="primary" icon="download">導出</a-button>

//methods下

	//點擊事件
    downloadExcel() {
      this.export2Excel()
    },
    //數據寫入excel
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel') //這裏必須使用絕對路徑，使用@/+存放export2Excel的路徑
        const tHeader = ['列表1', '列表2', '列表3'] // 導出的表頭名信息
        const filterVal = ['name1', 'name2', 'name3'] // 導出的表頭字段名，需要導出表格字段名,根據後臺返回的數據
        const list = this.excelData  //根據後臺返回的數據源
        const data = this.formatJson(filterVal, list)

        export_json_to_excel(tHeader, data, `遊戲列表-${dayjs().format('YYYY-MM-DD')}`) // 導出的表格名稱，根據需要自己命名 //import * as dayjs from 'dayjs'引入事件轉換或(new Date()).format('YYYY-MM-DD'))
      })
    },
    //格式轉換
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }