前端常用方法之匯出excel表格

small_lang發表於2020-11-12
1 安裝依賴

npm install -S file-saver xlsx(這裡其實安裝了2個依賴)

npm install -D script-loade

2 下載js依賴包

在這裡插入圖片描述

excel/Export2Excel
提取碼: w33n

3 html程式碼:
  <el-button type="primary"  @click="export2Excel()">匯出Excel</el-button>
4 js方法程式碼:
methods:{
     export2Excel () {
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../excel/Export2Excel')
            // 設定Excel的表格第一行的標題
            const tHeader = ['表名', '中文名', '表的描述']
            // 需要提取的欄位
            const filterVal = ['tableName','tableNameCn','tableDesc'];  

            // 把data裡的tableData存到list this.tableData是表格資料
            const list = this.tableData
            // 將list的某些欄位資料提取出來的方法
            const data = this.formatJson(filterVal, list);

            // 獲取時間戳給檔案命名
            const fileDate = new Date().getTime()
            // 匯出Excel           表頭   匯出的資料    檔名
            export_json_to_excel(tHeader, data, '標籤表' + fileDate)
            // console.log(tHeader,list,fileDate);

        })
      },
      // 將某些欄位資料提取出來的方法
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
 }

相關文章