Vue 純前端導出Excel

實際開發(fā)，遇到要求只在前端進行導出Excel文件的需求，而非調(diào)用接口形式。

1.使用npm下載插件

npm 命令行如下：

npm install xlsx file-saver -S

npm install script-loader -S -D

也可以使用 cnpm :

cnpm install xlsx file-saver -S

cnpm install script-loader -S -D

2.在 -src文件夾下創(chuàng)建增加兩個文件：

如圖：

文件位置

文件資源路徑：

鏈接:https://pan.baidu.com/s/1faCXdvqoiyagGWID3_e_PA

密碼:bau3

下載記得點贊，口享！

3. 封裝、使用

按鈕使用：

 <el-tooltip class="item" effect="dark" content="導出" placement="bottom">
   <el-button type="primary" circle icon="el-icon-download" @click="exportExcelData" />
  </el-tooltip>

// click事件
exportExcelData () {
     // 省略的邏輯代碼 ......
      exportExcel(columnTitle, columnData, "我的導出文件名"); //調(diào)用封裝好的方法
}

這里要說注意下，這個導出數(shù)據(jù)我的是一個二維數(shù)組，需要做一個處理

封裝成公共的方法：

// 導出Excel
export function exportExcel(columns,list,excelName){
  require.ensure([], () => {
      const { export_json_to_excel } = require('../vender/Export2Excel');//注意引入資源路徑問題（我這里是相對路徑）
      let tHeader = []
      let filterVal = []
      columns.forEach(item =>{
          tHeader.push(item.title)
          filterVal.push(item.key)
      })
      let data = []
      list.forEach(v => {
        v.forEach((item, j) =>{
          let a = data[j] = data[j] || []
          a.push(item)
        })
      })
      export_json_to_excel(tHeader, data, excelName);
  })
}

4. 導出結(jié)果

如圖：

導出的excel