vue多个数据不一样的表格导出到同一张excel里面

2023-10-20 21:03:58

刚来公司第二天, 甩了个需求, 把两个不同表格的数据导出到同一个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/

码农公寓

1. 安装依赖

相关文章