vue前端js上传压缩包或excel文件，读取excel内容

原创已于 2023-08-18 17:55:32 修改 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #excel

于 2023-08-18 17:27:21 首次发布

文章描述了如何在前端使用Vue和相关库如JSZip和xlsx.js来解析上传的压缩包，包括.zip和.xlsx/xls文件，解压后读取Excel内容的过程。

一、纯前端解析压缩包

①上传压缩包或.xlsx,.xls文件

②压缩包解压、转换格式读取excel内容。

需要下载插件：jszip、xlsx

npm install jszip --save

npm install xlsx --save

完整代码如下：亲测可用

<template>
    <input 
      ref="files"
      type="file" 
      multiple 
      accept=".xlsx,.xls,.zip,.rar"
      @change="uploadData"
      style="display:none;"
    >
    <el-button type="primary"  @click="goFile">
      <span>上传文件</span>
    </el-button>
</template>

<script setup>
import { ref  } from 'vue';
import $ from 'jquery';
import JSZip from 'jszip';
import { read, utils } from 'xlsx';
  const files = ref(null)
  const goFile = () => {
      files.value.click()
  }
  const uploadData = e => {
    console.log('输出文件--', e.target.files)
    const file = files.value.files;
    const zip = new JSZip();
    for(let i = 0; i < file.length; i ++) {
      // 压缩包文件
      if(/\.(zip|rar)$/.test(file[i].name.toLowerCase())){
        console.log('zip文件', file[i])
        // 读取
        JSZip.loadAsync(file[i]).then(function(zip) {
          Object.keys(zip.files).forEach(function(filename) {
            if(/\.(xls|xlsx)$/.test(filename.toLowerCase())){ // excel文件
              zip.files[filename].async("blob").then((content)=>{ // 转 blob 格式
                  let oneFile = new File([content], filename, {type: ''}) // 转file格式
                  readExcel(oneFile);
              });
            } else { // 其他文件只输出一下
              zip.files[filename].async("string").then(function(fileData){
                console.log(`读取${filename}--`, fileData.substring(0, 10)); // 感觉展示太长截取了下
              });
            }
          });
        });
      } else { // .xlsx,.xls文件
        console.log('单文件', file[i])
        readExcel(file[i]);
      }
    }
  }
  const readExcel = (file) =>{
       // 如果没有文件名
       if(file.length<=0){
        return false;
       }else if(!/\.(xls|xlsx)$/.test(file.name.toLowerCase())){
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
        return false;
       }

       const fileReader = new FileReader();
       fileReader.onload = (ev) => {
        try {
           const data = ev.target.result;
           // 切换为新的调用方式
           const workbook = read(data, {
            type: 'binary'
            });
            // 取第一张表
            const wsname = workbook.SheetNames[0];
            // 切换为新的调用方式 生成json表格内容
            const jsons = utils.sheet_to_json(workbook.Sheets[wsname]);
            console.log(`读取表格${file.name}------`, jsons);
            // 后续为自己对ws数据的处理
          } catch (e) {
            return false;
          }
       };
       fileReader.readAsBinaryString(file);
   }
</script>

.rar格式的压缩包我没测