vue导入xlsx表格获取数据写入表格中

1.上传elcel表格得到表格对应的table数组

  原理：主要依赖于 xlsx 包  版本依赖 0.16.1

  下载方式npm install xlsx@0.16.1  0.18也可以 引入方式一定要用require("xlsx")的方式

npm install xlsx@0.16.1

  引入方式  var xlsx = require("xlsx");  

还用的了el-upload

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="doUpload"
      :data="{ bizType: 1, type: 1 }"
      :on-change="changeFile"
      :multiple="false"
      :limit="1"
      :file-list="fileList"
      :auto-upload="false"
      accept=".xls,.xlsx"
    >
      <el-button
        style="margin-left: 10px"
        slot="trigger"
        size="mini"
        icon="el-icon-folder-opened"
        type="primary"
        >选择文件</el-button
      >
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      doUpload: "/api/statis/budgetStandard/importIncomeInfoExcel",
      fileList: [],
    };
  },
  methods: {
    changeFile(file, fileList) {
      let dataList = [];
      if (fileList.length) {
        let fileContent = fileList[0].raw;
        const reader = new FileReader();
        reader.readAsArrayBuffer(fileContent);
        reader.onload = function () {
          const buffer = reader.result;
          const bytes = new Uint8Array(buffer);
          const length = bytes.byteLength;
          let binary = "";
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          const XLSX = require("xlsx");
          const wb = XLSX.read(binary, {
            type: "binary",
          });
          // excel表格的数据有第一张表第二张表的 SheetNames[0]就是第一个表
          const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // 这里就是吧excel表格的数据转换成数组的形式
          console.log(outdata, "outdata");
        };
      }
    },
  },
};
</script>