vue + xlsx 实现前端读取excel文件内容

最新推荐文章于 2025-08-20 23:51:52 发布

原创最新推荐文章于 2025-08-20 23:51:52 发布 · 2.5k 阅读

5 ·

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

标签

#vue #javascript #web

JavaScript 同时被 2 个专栏收录

25 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

本文介绍了一种前端使用JavaScript读取Excel文档数据的方法，通过html元素和FileReader API结合xlsx插件，实现了对xls/xlsx格式文件的上传、读取及数据解析。

前端实现js读取Excel文档数据内容

html代码如下

 <div class="fl f-c-w">
            <p>上传填好的顾客信息<span class="tip-msg">（仅支持xls/xlsx格式）</span></p>
            <el-button type="text" @click="select_file" class="uploadfile">
              上传文件
              <input type="file" class="filexls" ref="file" name="file" accept=".xlsx,.xls" id="xlf" @change="change_file">
            </el-button>
            <p class="select-file-info" v-show="file_size">
              {{file_name}}（{{file_size}}kb）
              <i class="el-icon-close pointer" @click="delet_select_file"></i>
            </p>
   </div>

js代码

这里需要使用xlsx插件

import XLSX from 'xlsx'
  export default{
		methods:{
			// 获取文件
		      change_file(e){
		        if(this.$refs.file && !this.$refs.file.files[0]) return false;
		        const selected_file = this.$refs.file.files[0];
		        this.fileExcel.oldFile = selected_file;
		        this.file_name = selected_file.name;
		        this.file_size = selected_file.size ? (selected_file.size / 1024).toFixed(2) : 0;
		        this.readFule(selected_file)
		      },
		      readFule(file){
		        var name = file.name;
		        var reader= new FileReader();
		        let that = this;
		        reader.onload = function (e) {
		            that.fileExcel.oldFile = e.target.result;
		            var wb = XLSX.read(that.fileExcel.oldFile, { type: "binary" });
		            // console.log(wb);
		            var wb_sheetname=wb.SheetNames[0];
		            const wb_sheet = wb.Sheets[wb_sheetname]
		            // console.log(wb_sheet);
		            let fromTo = "";
		            fromTo = wb_sheet['!ref'];
		            // console.log(fromTo + "fromTo")
		            that.selectFileData = XLSX.utils.sheet_to_json(wb_sheet);
		            console.log(that.selectFileData);
		            if(!that.selectFileData.length){
		              tipsMsg(that,'error',`上传的文件数据为空！`);
		              return false
		            }
		            that.get_result();
		        };
		        reader.readAsBinaryString(file);
		      },
		}
  }