js xlsx

<template>
  <div>
    <fieldset style="padding: 20px;margin:20px;">
      <legend>读</legend>

      <input type="file" ref="fileInput"/>
      <button @click="onRead">onRead</button>
    </fieldset>

    <fieldset style="padding: 20px;margin:20px;">
      <legend>写</legend>
      <button @click="onWrite">onWrite</button>
    </fieldset>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      file: null,
      wb: null,
      xlsxData: [],
    }
  },
  methods: {
    onRead() {
      if (this.$refs['fileInput'].files.length === 0) {
        alert('请选择文件')
        return false
      }
      let file = this.$refs['fileInput'].files[0] // 使用传统的input方法需要加上这一步

      // 文件格式是否符合
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1)
      if (!['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].includes(fileType)) {
        alert('格式错误！请重新选择')
        return false
      }

      this.fileExchange(file).then(res => {
        console.log(res)
      })

    },

    fileExchange(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()

        reader.onload = function (e) {
          const data = e.target.result
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          const result = []
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }

        reader.readAsBinaryString(file) // 传统input方法
      })
    }
    ,


    onWrite() {
      // 将workbook装化成blob对象
      function workbook2blob(workbook) {
        // 生成excel的配置项
        let wopts = {
          // 要生成的文件类型
          bookType: "xlsx",
          // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
          bookSST: false,
          type: "binary"
        };
        let wbout = XLSX.write(workbook, wopts);

        // 将字符串转ArrayBuffer
        function s2ab(s) {
          let buf = new ArrayBuffer(s.length);
          let view = new Uint8Array(buf);
          for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
          return buf;
        }

        return new Blob([s2ab(wbout)], {
          type: "application/octet-stream"
        });
      }

      // 将blob对象创建bloburl，然后用a标签实现弹出下载框
      function openDownloadDialog(blob, fileName) {
        if (typeof blob == "object" && blob instanceof Blob) {
          blob = URL.createObjectURL(blob); // 创建blob地址
        }
        let aLink = document.createElement("a");
        aLink.href = blob;
        // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
        aLink.download = fileName || "";
        let 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);
      }


      const data1 = [{
        id: '1',
        name: '张三丰',
        phone: '16834567890',
      }]
      const sheetData1 = data1.map(item => ({
        'ID': item.id,
        '收件人': item.name,
        '手机号': item.phone,
      }));
      // 支持多 sheet
      // const sheetData2 = data2.map(item => ({
      //   // 在这里设置表头和对应项的值
      // }));
      // const sheetData3 = data3.map(item => ({
      //   // 在这里设置表头和对应项的值
      // }));
      // ...

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

  },
}
</script>
<style lang="scss" scoped>

</style>