vue读取excel文件数据

1、文件上传按钮 ，这里用的是elment组件库，所以按钮是el-button，根据自己所使用的酌情更改就行

         <input
            type="file"
            id="fileInputId"
            ref="fileInputefRef"
            accept=".xlsx,.xls"
            @change="readFileKoc"
            style="display: none"
          />
          <el-button
            type="primary"
            onclick="
                  event.preventDefault();
                  fileInputId.click();
                "
          >
           选择本地素材文件
          </el-button>

1、安装库：

npm install xlsx

2、导入库 

import * as XLSX from 'xlsx';

3、获取文件内容

//组件实例化

const fileInputefRef = ref(); 

// 上传表格

const readFileKoc = () => {

  const file = fileInputefRef.value.files[0];   //获取文件

  const reader = new FileReader();

  reader.onload = (e) => {

    const data = new Uint8Array(e.target.result);

    const workbook = XLSX.read(data, { type: "array" });

    const worksheet = workbook.Sheets[workbook.SheetNames[0]];

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true });

    if (jsonData[0] == undefined) {

      ElMessage.error("请确定上传文件内容不为空");

      return;

    } else {

    console.log(jsonData);  //文件内容内容

    }

  };

  reader.readAsArrayBuffer(file);

};