vue3中获取Excel和csv文件中的内容

℘团子এ

于 2024-06-28 17:54:24 发布

阅读量172

点赞数 1

分类专栏： vue3 文章标签： excel javascript vue.js

本文链接：https://blog.csdn.net/2202_75509848/article/details/140050210

版权

vue3 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

1.效果

2.安装

npm install xlsx

yarn add xlsx

3.引入使用

<el-upload ref="uploadRef" :on-change="changeFile" :show-file-list="false" class="mr10" accept=".csv, .xlsx, .xls"
  action="#" :auto-upload="false">
  <template #trigger>
    <el-button type="primary">选择文件</el-button>
  </template>
</el-upload>

import * as XLSX from "xlsx"

// csv/excel 选择文件
const changeFile = async (file) => {
    // const file = file.file;
    // 创建文件读取对象 用于读取file 和 blob
    const fileReader = new FileReader();
    let sheetObj = []
    // 读取文件到二进制 异步读取 配合 readAsBinaryString(file) 函数一起使用
    fileReader.readAsBinaryString(file.raw);
    fileReader.onload = (event) => {
        console.log(event);
        // 得到二进制的result
        const { result } = event.target;
        console.log(result);
        // 通过$xlsxUtils 解析二进制流获得workbook对象
        const wb = XLSX.read(result, { type: "binary" });
        console.log(wb);
        // 遍历sheet
        for (let sheetName in wb.Sheets) {
            // 虽然wb.Sheets中可以看出sheet都是一个对象 但是此处遍历只会得到sheetName
            console.log(sheetName);
            // 通过sheetName获取真正的sheet对象
            console.log(wb.Sheets[sheetName]);
            // 通过xlsxUtils.sheet_to_json() 转换成对象
            sheetObj = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
            console.log('sheetObj', sheetObj);
            // 下面就是对象操作 根据实际情况自定
        }
        sheetObj.forEach((el, i) => {
          dataList.value.push({
                answer: el.answer,
                question: el.question,
            })
        })
    }
    // 以二进制方式打开文件
    // fileReader.readAsBinaryString(file);
    // 阻止上传
    console.log(file, 'file');
    return false
}