技術標籤：vueelement-uiexcel

目錄

• vue 實現前端匯出Excel
• • 安裝依賴
  • 新增js檔案
  • 實現程式碼

vue 實現前端匯出Excel

安裝依賴

1. npm install -S file-saver xlsx
2. npm install -D script-loader

新增js檔案

新增 js 檔案 Export2Excel.js
資源連結

在/src目錄下 新建vendor資料夾

實現程式碼

按鈕程式碼

<el-form-item>
   <el-button  style="margin:0 0 20px 20px;" type="primary"
 
 icon="el-icon-document" @click="handleDownload">匯出 Excel
   </el-button>
</el-form-item>

匯出程式碼

// 匯出
    handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
      	// 定義表頭
        const tHeader = ['車道', '公司編號', '箱體註冊碼', '檢驗碼', '箱體重量', '危險標識', '箱體殘損'
 
, '封籤狀態', '獲取時間']
        // 表頭對應欄位
        const filterVal = ['groupName', 'ownerCode', 'registrationCode', 'checkDigit', 'containerSize', 'dangerousMark', 'containerStatus', 'sealStatus','recordDate']
        const list = this.list // 表格資料
        const data = this.formatJson(filterVal, list)
        excel.
 
export_json_to_excel({
          header: tHeader,
          data,
          filename: '歷史記錄', //檔名
          autoWidth: true,//autoWidth
          bookType: 'xlsx' //型別
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }