vue导入处理Excel表格详解

目录

• • • 1. 前言
    • 2.vue导入Excel表格
    • • 2.1 使用ElementUI中的upload组件
      • 2.2 使用input文件上传
    • 3. 总体代码与效果
    • 4. 总结

1. 前言

最近遇到前端导入并处理excel表格的情况，趁此机会刚好研究一下vue导入并处理excel数据；当然自己手撸一个工具没有那么多时间，本文只是借助现有的工具来做一下工具使用总结。

2.vue导入Excel表格

vue导入Excel表格主要有两种常用的方法，一个是借助ElementUI文件上传进行表格导入，另一个是自带的input做文件上传；以下对两个方法做详细介绍；

2.1 使用ElementUI中的upload组件

1. 安装ElementUI

   npm i element-ui -S

2. 安装Excel表格解析插件

   npm i xlsx -S

3. 导入需要用的工具包

   import Vue from “vue”;
   import ElementUI from “element-ui”;
   import “element-ui/lib/theme-chalk/index.css”;
   import { read, utils } from “xlsx”; // 注意处理方法引入方式
   Vue.use(ElementUI);

4. 引入组件

5. 添加处理逻辑

   // 导入成功时执行
   handleChange(res, file, fileList) {
   // 将文件放入
   for (let i = 0; i < fileList.length; i++) {
   if (file.name != fileList[i].name) {
   this.fileList.push({
   name: file.name,
   url: “”,
   uid: file.uid
   });
   }
   }
   const files = { 0: file };
   this.readExcel(files);
   },
   readExcel(file) {
   const fileReader = new FileReader();

     fileReader.onload = ev => {
       try {
         const data = ev.target.result;
         const workbook = read(data, { type: "binary" });
         const params = []