示范excel的demo
网络异常,图片无法展示
|
先导入xlsx
npm install xlsx import * as XLSX from "xlsx"; // vue3可用此引入 复制代码
上传组件用了element-plus的el-upload组件
<template> <el-upload class="upload-demo" action="" drag :auto-upload="false" :on-change="uploadChange" :limit="1" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> </el-upload> </template> 复制代码
代码实现部分
<script lang="ts"> import { defineComponent } from "vue"; import * as XLSX from "xlsx"; // vue3可用此引入 export default defineComponent({ name: "upload", setup() { const uploadChange = async (e) => { console.log(e); const files = e.raw; if (files.length <= 0) { return false; } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) { console.log("上传格式不正确,请上传xls或者xlsx格式"); return false; } // 读取表格 const fileReader = new FileReader(); fileReader.onload = (ev) => { const workbook = XLSX.read(ev.target.result, { type: "binary", }); const wsname = workbook.SheetNames[0]; const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // console.log(ws); // 转换成json的数据 const m = dealExcel(ws) // ...对数据进行自己需要的操作 console.log(m) }; fileReader.readAsBinaryString(files); }; const dealExcel = (ws) => { let keymap = { // 我们要转换的开头 菜名: "dishes", 介绍: "introduce", 配料: "ingredients", 标签: "label", 提示: "tips", 水平: "hor", 方式: "way", 时间: "time", 风味: "flavor", 步骤: "steps" } ws.forEach((sourceObj) => { let arr = new Array() Object.keys(sourceObj).map((keys) => { if(keys.includes('步骤')) { arr.push(sourceObj[keys]) delete sourceObj[keys] } else if (keymap[keys]) { sourceObj[keymap[keys]] = sourceObj[keys] delete sourceObj[keys] } }) sourceObj['steps'] = arr }) return ws } return { uploadChange, } } }) </script> 复制代码
结果
网络异常,图片无法展示
|
先读取file文件,然后通过判断后缀来区分是不是excel文件
接着读取数据并转换成json格式
dealExcel
这个函数,用于处理表格里的中文表头,把它转化成对应的key值
最后需要处理多个步骤,把这些步骤转化成一个array数组,并输出出来。。
最后最后,前端这边最多只能进行5万左右的数据流,太多浏览器就会崩溃了,有大佬有优化的方法,烦请教教我。