vue 导入excel并转为json发送给后端

news/2024/7/21 6:59:17 标签: vue.js, excel, json

vue 导入excel并转为json发送给后端

可以处理.xlsx , .csv , .xls 格式的文件

  1. 安装插件
# 用于操作excel .xlsx  .xls
npm install xlsx --save    

# papaparse用于操作.csv 文件 jschardet编码解析
npm install papaparse --save   
npm install jschardet --save
  1. 完整代码
<template>
<div>
  <!-- 1. 上传 导入 -->
  <el-upload action accept=".xlsx,.csv,.xls" :auto-upload="false" :on-change="handleImportFile" :show-file-list="false">
    <el-button icon="el-icon-upload2">导入</el-button>
  </el-upload>
</div>
</template>

<script>
// 2. 引入插件
// import xlsx from "xlsx";  // 使用这种方式引入时报错了
import * as xlsx from "xlsx";
import Papa from "papaparse";

export default {
  data() {
    return {
      // 3.添加属性
      changeCnToEn: {
        姓名: "name",
        年龄: 'age'

      },
    };
  },

  method: {
    // 4. 处理选择文件回调
    async handleImportFile() {
      // 获取文件类型
      const fileType = e.name.split(".")[e.name.split(".").length - 1];
      let excelArr = "";
      switch (fileType) {
        case "csv":
          excelArr = await this.importCsv(e.raw);
          break;
        case "CSV":
          excelArr = await this.importCsv(e.raw);
          break;
        case "xlsx":
          excelArr = await this.importXls(e.raw);
          break;
        case "xls":
          excelArr = await this.importXls(e.raw);
          break;
      }

      console.log(excelArr); // 数组对象 就是Excel里的数据
      setTimeout(() => {
        // 发给后端
        // this.httpUpload(excelArr);
      }, 500);
    },

     // 7.  请求后端接口
    httpUpload(excelArr) {
      const params = {
        xxx: excelArr, // 表格数据
      }
      request({
        url: '',
        method: 'post',
        params: leadData
      }).then(res => {
        console.log(res, 'res');
      })
    },


    // 5. 解析excel为JSON 
    // 上传xlsx xls文件
    async importXls(file) {
      if (!file) return;
      let data = await this.readFile(file);
      // type :'binary' 类型为二进制
      let eleData = xlsx.read(data, {
        type: "binary"
      });
      let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]];
      eleData = xlsx.utils.sheet_to_json(eleDataSheet); // 将解析出的数据转换为json格式（xlsx自带的方法）
      // eleData = eleData.length >1? eleData[1] : eleData[0]
      const arr = [];
      console.log(Object.keys(this.changeCnToEn));
      eleData.forEach((item) => {
        const userInfo = {};
        Object.keys(item).forEach((key) => {
          userInfo[this.changeCnToEn[key]] = item[key];
        });
        arr.push(userInfo);
      });
      return arr;
    },

    
    // 把文件按照二进制方式读取
    readFile(file) {
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },

    // 6. 解析csv文件为JSON
    // 上传文件解析csv
    async importCsv(file) {
      return new Promise((resolve) => {
        let fReader = new FileReader();
        fReader.readAsDataURL(file);
        fReader.onload = (evt) => {
          // 检查编码
          let encoding = this.checkEncoding(evt.target.result);
          // 将csv转换成二维数组
          Papa.parse(file, {
            encoding,
            complete: (res) => {
              // UTF8 \r\n与\n混用时有可能会出问题
              let data = res.data;
              if (data[data.length - 1] == "") {
                //去除最后的空行
                data.pop();
              }
              const dataKeys = Object.values(this.changeCnToEn);
              let resArr = [];
              data.forEach((element, index) => {
                const resInfo = {};
                if (index > 0) {
                  dataKeys.forEach((item, j) => {
                    resInfo[item] = element[j];
                  });
                  resArr.push(resInfo);
                }
              });
              console.log(resArr);
              // console.log(data)
              resolve(resArr);
            },
          });
        };
      });
    },
    // 编码转换
    checkEncoding(base64Str) {
      // 这种方式得到的是一种二进制串
      let str = atob(base64Str.split(";base64,")[1]);
      // 要用二进制格式
      const jschardet = require("jschardet");
      let encoding = jschardet.detect(str);
      encoding = encoding.encoding;
      if (encoding === "windows-1252") {
        encoding = "ANSI";
      }
      return encoding;
    },

  }

};
</script>

抽取工具类

import * as xlsx from "xlsx";
import Papa from "papaparse";

// 使用:
/**
const excelArr = await xlsxToJson(file.raw);
const excelArr = await csvToJson(file.raw);
console.log(excelArr); // 数组对象 就是Excel里的数据
 */


/**
 * 将xlsx, xls格式excel文件转为json数据
 * @param {*} file excel文件
 * @param {*} tableHeadCnToEn excel表头文字和字段的对应  示例: { 姓名: 'name', 年龄: 'age'  }
 * @returns 
 */
export async function xlsxToJson(file, tableHeadCnToEn) {
  if (!file) return;
  // 读取file文件的内容(转换为json格式)
  let data = await readFile(file);
  // console.log(data); //解析出的二进制文件
  // type :'binary' 类型为二进制
  let eleData = xlsx.read(data, { type: "binary" });
  let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]];
  eleData = xlsx.utils.sheet_to_json(eleDataSheet); // 将解析出的数据转换为json格式（xlsx自带的方法）
  const arr = [];
  eleData.forEach((item) => {
    const userInfo = {};
    Object.keys(item).forEach((key) => {
      userInfo[tableHeadCnToEn[key]] = item[key];
    });
    arr.push(userInfo);
  });
  return arr;
}

/**
 * 将csv格式excel文件转为json数据
 * @param {*} file excel文件
 * @param {*} tableHeadCnToEn excel表头文字和字段的对应  示例: { 姓名: 'name', 年龄: 'age'  }
 * @returns 
 */
export async function csvToJson(file, tableHeadCnToEn) {
  return new Promise((resolve) => {
    let fReader = new FileReader();
    fReader.readAsDataURL(file);
    fReader.onload = (evt) => {
      // 检查编码
      let encoding = checkEncoding(evt.target.result);
      // 将csv转换成二维数组
      Papa.parse(file, {
        encoding,
        complete: (res) => {
          // UTF8 \r\n与\n混用时有可能会出问题
          let data = res.data;
          if (data[data.length - 1] == "") {
            //去除最后的空行
            data.pop();
          }
          const dataKeys = Object.values(tableHeadCnToEn);
          let resArr = [];
          data.forEach((element, index) => {
            const resInfo = {};
            if (index > 0) {
              dataKeys.forEach((item, j) => {
                resInfo[item] = element[j];
              });
              resArr.push(resInfo);
            }
          });
          resolve(resArr);
        },
      });
    };
  });
}

// 把文件按照二进制方式读取
function readFile(file) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}

// 编码转换
function checkEncoding(base64Str) {
  // 这种方式得到的是一种二进制串
  let str = atob(base64Str.split(";base64,")[1]);
  // 要用二进制格式
  const jschardet = require("jschardet");
  let encoding = jschardet.detect(str);
  encoding = encoding.encoding;
  if (encoding === "windows-1252") {
    encoding = "ANSI";
  }
  return encoding;
}
  • 使用工具类方式 实现excel文件转json, 完整代码
<template>
<div>
  <!-- 1. 上传 导入 -->
  <el-upload action accept=".xlsx,.csv,.xls" :auto-upload="false" :on-change="handleImportFile" :show-file-list="false">
    <el-button icon="el-icon-upload2">导入</el-button>
  </el-upload>
</div>
</template>

<script>
import { xlsxToJson, csvToJson } from "@/utils/excelUtil.js";
export default {
  data() {
    return {
      // 3.添加属性
      changeCnToEn: {
        姓名: "name",
        年龄: 'age'

      },
    };
  },

  method: {
    // 4. 处理选择文件回调
    async handleImportFile() {
      // 获取文件类型
     const fileType = e.name.split(".")[e.name.split(".").length - 1];
      let excelArr = "";
      switch (fileType) {
        case "csv":
          excelArr = await csvToJson(e.raw, this.changeCnToEn);
          break;
        case "CSV":
          excelArr = await csvToJson(e.raw, this.changeCnToEn);
          break;
        case "xlsx":
          excelArr = await xlsxToJson(e.raw, this.changeCnToEn);
          break;
        case "xls":
          excelArr = await xlsxToJson(e.raw, this.changeCnToEn);
          break;
      }

      console.log(excelArr); // 数组对象 就是Excel里的数据
      setTimeout(() => {
        // 发给后端
        // this.httpUpload(excelArr);
      }, 500);
    },

     // 7.  请求后端接口
    httpUpload(excelArr) {
      const params = {
        xxx: excelArr, // 表格数据
      }
      request({
        url: '',
        method: 'post',
        params: leadData
      }).then(res => {
        console.log(res, 'res');
      })
    },
  }

};
</script>

http://www.niftyadmin.cn/n/4930919.html

相关文章

循环队列的判满和判空方法

循环队列的判满和判空方法

循环队列 循环队列定义循环队列判满盘判空 循环队列定义 前面指出了顺序队列的缺点&#xff0c;这里引出循队列的概念。将顺序队列臆造为一个环状的空间&#xff0c;即把存储队列元素的表从逻辑上视为一个环&#xff0c;称为循环队列。 循环队列判满盘判空 当队首指针Q.fron…
阅读更多...
ROBOGUIDE教程：FANUC机器人X型焊枪气动点焊焊接

ROBOGUIDE教程：FANUC机器人X型焊枪气动点焊焊接

目录 概述 机器人系统创建 X型点焊焊枪安装与配置 机器人组输出（GO）信号配置 气动点焊初始设置 点焊设备设置 点焊设备I/O信号设置 焊接控制器I/O信号设置 X型点焊焊枪运动控制配置 气动焊枪手动运行操作 气动点焊焊接指令介绍 机器人点焊焊接程序编写 机器人仿…
阅读更多...
OpenEuler 上安装redis服务

OpenEuler 上安装redis服务

访问redis的下载地址 Index of /releases/地址&#xff1a;Index of /releases/ 选择对应的版本。我选择5.0的版本。 下载对应的版本redis wget https://download.redis.io/releases/redis-5.0.8.tar.gz 解压 redis tar -zxvf redis-5.0.9.tar.gz 进入redis目录 cd redis-5…
阅读更多...
k8部署安装

k8部署安装

1 环境初始化 1.1 检查操作系统的版本 此方式下安装kubernetes集群要求Centos版本要在7.5或之上 [rootmaster ~]# cat /etc/redhat-release Centos Linux 7.5.1804 (Core)1.2主机名成解析 三台服务器的/etc/hosts文件 192.168.90.100 master 192.168.90.106 node1 192.168.…
阅读更多...
团队管理之PDP大法

团队管理之PDP大法

PDP 是什么&#xff0c;为什么有些人会谈PDP色变呢&#xff1f;人常常会对自己不了解的东西感到恐惧 一、什么是PDP 团队管理中的PDP可能指"Personal Development Plan"&#xff08;个人发展计划&#xff09;&#xff0c;它是一种用于帮助团队成员提升个人能力和达成…
阅读更多...
vscode运行python报错：ModuleNotFoundError:No module named ‘xxx‘

vscode运行python报错：ModuleNotFoundError:No module named ‘xxx‘

在乌班图上使用pycharm的时候&#xff0c;pycharm总是莫名其妙卡死&#xff0c;又说是搜狗输入法的锅&#xff0c;又说别的原因&#xff0c;一气之下不用pycharm,转到vscode上&#xff0c;没想到出现了如下报错。 就是vscode在运行python的时候&#xff0c;自定义模块的调用无…
阅读更多...
【Java 回忆录】Java全栈开发笔记文档

【Java 回忆录】Java全栈开发笔记文档

这里能学到什么&#xff1f; 实战代码文档一比一记录实战问题和解决方案涉及前端、后端、服务器、运维、测试各方面通过各方面的文档与代码&#xff0c;封装一套低代码开发平台直接开腾讯会议&#xff0c;实实在线一起分享技术问题核心以 Spring Boot 作为基础框架进行整合后期…
阅读更多...
Android的学习系列之Android Studio Setup安装

Android的学习系列之Android Studio Setup安装

Android的学习系列之Android Studio Setup安装 [TOC](Android的学习系列之Android Studio Setup安装) 前言Android平台搭建总结 前言 还是项目需要&#xff0c;暂时搭建安卓的运行平台。 Android平台搭建 安装包 双击安装包&#xff0c;进入安装。 下一步 根据自己需求&a…
阅读更多...
最新文章

Copyright @ 2022~2023