vue 中使用 js-xlsx 导出数据导 excle, 支持多 sheet

• 安装: npm install xlsx -S
• 支持多 sheet 导入
• 代码如下:
• 特别强调, 按照官方文档以及网上其他文章的说法, 导入的时候使用的是 import XLSX from 'xlsx', 我下载的 js-xlsx 的版本是 0.18.3, 这个版本中使用这种导入方式根本就不行, 需要使用下面的导入方式或者使用解构的方式导入才能行

<template>
  <div class="excle">
    <button @click="download">下载数据</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  name: 'Excle',
  data () {
    return {
      exportData1: [
        {
          id: '韩版设计时尚风衣大',
          name: 'MPM00112',
          phone: '￥999.00',
          scanTime: 3423
        }
      ],
      exportData2: [
        {
          id: '韩版设计时尚风衣大',
          name: 'MPM00112',
          phone: '￥999.00',
          scanTime: 3423
        }
      ]
    }
  },
  methods: {
    download () {
      const sheetData1 = this.exportData1.map(item => ({
        ID: item.id,
        收件人: item.name,
        手机号: item.phone,
        扫描时间: item.scanTime
      }))
      // 支持多 sheet
      const sheetData2 = this.exportData2.map(item => ({
        ID: item.id,
        收件人: item.name,
        手机号: item.phone,
        扫描时间: item.scanTime
      }))

      const sheet1 = XLSX.utils.json_to_sheet(sheetData1)
      // 支持多 sheet
      const sheet2 = XLSX.utils.json_to_sheet(sheetData2)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet1, '收件人列表')
      // 支持多 sheet
      XLSX.utils.book_append_sheet(wb, sheet2, '表格 sheet2')
      const workbookBlob = this.workbook2blob(wb)
      // 导出最后的总表
      this.openDownloadDialog(workbookBlob, '收件人列表.xlsx')
    },

    workbook2blob (workbook) {
      // 生成excel的配置项
      const wopts = {
        // 要生成的文件类型
        bookType: 'xlsx',
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: 'binary'
      }
      const wbout = XLSX.write(workbook, wopts)
      // 将字符串转ArrayBuffer
      s2ab (s) {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
      }
      const blob = new Blob([s2ab(wbout)], {
        type: 'application/octet-stream'
      })
      return blob
    },

    openDownloadDialog (blob, fileName) {
      if (typeof blob === 'object' && blob instanceof Blob) {
        blob = URL.createObjectURL(blob) // 创建blob地址
      }
      const aLink = document.createElement('a')
      aLink.href = blob
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || ''
      const 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>