vue多個數據不一樣的表格導出到同一張excel里面

剛來公司第二天, 甩了個需求, 把兩個不同表格的數據 導出到同一個excel中 ........額,好吧

你要說,兩個表格數據差不多, 直接合並數據導出就行:

async function getData() {
 let data1 = await this.get1();
 let data2 = await this.get2();
 data3 = data1.concat(data2)
}

 

vue多個數據不一樣的表格統一導出excel

廢話不多說, 上圖上代碼:

 

         

 

 

1. 安裝依賴

進入項目文件夾，安裝 xlsx

npm install xlsx

2. vue頁面代碼:  (隨拿就用)

<template>
  <div class="hello">
    <h1>導出excel, 多個表格的數據導出到同一張excel, 兩個sheel顯示</h1>
    <button @click="getExcel">導出excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx' //引入xlsx
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: ''
    }
  },
  mounted() {},
  methods: {
    // 導出excel, 多個表格的數據導出到同一張excel, 兩個sheel顯示
    getExcel() {
      // 表格數據1
      let sheet1data = [
        { department: '行政部', count: 2 },
        { department: '前端部', count: 2 }
      ]
      // 表格數據2
      let sheet2data = [
        { name: '張三', do: '整理文件' },
        { name: '李四', do: '打印' }
      ]
      // 修改數組對象中對象屬性名, 因為屬性都是英文名, 所以要匹配成 中文, 這樣excel導出的是中文屬性名 -------start
      let sheet1data_china = sheet1data.map((v) => {
        return { 部門: v.department, 數量: v.count }
      })
      let sheet2data_china = sheet2data.map((v) => {
        return { 姓名: v.name, 行為: v.do }
      })
      // 修改數組對象中對象屬性名, 因為屬性都是英文名, 所以要匹配成 中文 -------end
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data_china) //json_to_sheet 將 JS 對象數組轉換為工作表。 //aoa_to_sheet 將 JS 數據數組的數組轉換為工作表。
      var sheet2 = XLSX.utils.json_to_sheet(sheet2data_china)

      /* create a new blank workbook */
      var wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet1, '部門統計')
      XLSX.utils.book_append_sheet(wb, sheet2, '行政部')
      const workbookBlob = this.workbook2blob(wb)

      this.openDownloadDialog(workbookBlob, `部門統計.xlsx`)
    },
    // 將workbook裝化成blob對象
    workbook2blob(workbook) {
      // 生成excel的配置項
      var wopts = {
        // 要生成的文件類型
        bookType: 'xlsx',
        // // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
        bookSST: false,
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts)
      // 將字符串轉ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
      }
      var blob = new Blob([s2ab(wbout)], {
        type: 'application/octet-stream'
      })
      return blob
    },

    // 將blob對象創建bloburl，然后用a標簽實現彈出下載框
    openDownloadDialog(blob, fileName) {
      if (typeof blob == 'object' && blob instanceof Blob) {
        blob = URL.createObjectURL(blob) // 創建blob地址
      }
      var aLink = document.createElement('a')
      aLink.href = blob
      // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，有時候 file:///模式下不會生效
      aLink.download = fileName || ''
      var event
      if (window.MouseEvent) event = new MouseEvent('click')
      //   移動端
      else {
        event = document.createEvent('MouseEvents')
        event.initMouseEvent(
          'click',
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        )
      }
      aLink.dispatchEvent(event)
    }
  }
}
</script>

xlsx 官方文檔: https://github.com/SheetJS/sheetjs#utility-functions

 

 對新手福利: 本人碼雲倉庫代碼地址 :  https://gitee.com/bigbear520/excel-moreOut/tree/master

js案例鏈接: https://frontzhm.github.io/web-demo/export-excel/