前端基於vue，匯出為excel表格

由後端生成excel表格

• 當由後端生成excel表格，返回來的資料時亂碼的
  

• 因此前端要做處理，前端關鍵，主要有兩步

  1. 傳送請求時，要加responseType: 'blob'
  2. 處理返回的函式

// 對返回資料的處理函式
dealExcelRespose(res,filename){
    const link = document.createElement('a')
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // link.download = res.headers['content-disposition'] //下載後文件名
    link.download = filename//下載的檔名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
// ....省略
$.ajax({
    data:data, //data 為要傳送的資料
    method:'post',//或get 根據實際情況
    responseType: 'blob',
    success:(res)=>{
        this.dealExcelRespose(res,'檔名')
    }
})

 

後端返物件，前端來生成excel表格

• 下載依賴包

cnpm install -S file-saver xlsx
cnpm install -D script-loader

• 引入兩個檔案，

1. 百度網盤：
   連結：https://pan.baidu.com/s/180TV1O1GpJXqZqTtG0AjyA
   提取碼：7b9z
   
2. 關鍵程式碼如下

// 匯出
outPut(){
    console.log('點選了匯出')
    //表格物件
    let sourceOriginAmount = [
        {
            goodsName: '蘋果',
            sourceCode: '123'
        },
        {
            goodsName: '香蕉',
            sourceCode: '234'
        }
    ]; 
    const tHeader = ['編號', '商品名稱', '溯原始碼']; //表格表頭
    const filterVal = ['index', 'goodsName', 'sourceCode']; //要渲染的列
    turnToExcel(sourceOriginAmount,tHeader,filterVal,'表格名字') //呼叫封裝的函式
},
// 封裝的函式
turnToExcel(sourceOriginAmount,tHeader,filterVal,filename){
  import('@/assets/js/Export2Excel.js').then(excel => { // 匯入js模組
          const list = (sourceOriginAmount || []).map((item, key) => { // 通過 map 方法遍歷，組裝資料成上面的格式
              let obj_index={index:key+1}
              let obj={...item,...obj_index}
              return obj
          });
          if (list) {
              const data = list.map(v => filterVal.map(j => v[j]));// 生成json資料
              excel.export_json_to_excel({ // 呼叫excel方法生成表格
                  header: tHeader,
                  data,
                  filename
              });
          } else {
              alert('暫無無資料');
          }
          // this.loading = false;
      })
}