VUE批量导入/读取excel、下载模板文件功能实现

最新推荐文章于 2025-05-19 14:01:30 发布

原创

最新推荐文章于 2025-05-19 14:01:30 发布 · 2.1k 阅读

16 ·

CC 4.0 BY-SA版权

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

这篇博客介绍了如何在Vue项目中使用xlsx插件实现Excel文件的读取，并结合Element UI实现文件上传的美化。通过定义方法处理文件导入，以及利用a标签或Element UI的<el-upload>组件实现模板文件的下载。文件建议存放于public目录下，确保编译后仍可访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

excel文件读取，事前都是基于xlsx这个插件的，可以npm install自己安装，然后引入即可。

首先是页面实现HTML：

<!-- 导入按钮 -->
          <div id="label-import" class="label-import" >
              <span style="color: #FFFFFF;margin-left: 10px;">批量导入</span>
             <!-- 顶部 -->
             <div id="import_dingbu">
 
                <a href = "javascript:void(0)" onclick = "closeImport()" id="import_dingbu_close"><img src="img/03_part/tk_button_close_press.png" style=""></a>
 
             </div> <!-- dialog_dingbu -->
 
              <!-- 中部 -->
             <div id="import_zhongbu">
                  <div id="import_buju">
                    <input type="file" name="file" id="fileid" value="" accept=".xlsx,.xls,.csv"  onclick="filechoose()" /> <!-- onclick="filechoose()" -->
                    <input type="button" id="daoru" value="导入" onclick="fileimport()"/></br>
                    <a herf="#" download="moban.xlsx"  id="moban" class="downloadBtn" onclick="downloadmoban()">下载模板</a>
                      <!-- <button class="downloadBtn" type="button" onclick="downloadImg()" id="moban">下载模板</button> -->
                 </div>
 
                   <p style="float: right;margin-right: 50px;margin-top: 40px;" >
                     <b>注意：</b>
                         <span >1)必须根据模板格式录入，否则导入失败</br></span>
                         <span style="float: right;margin-right: 70px;">2)不支持IE等部分浏览器下载</span>
                   </p>
 
             </div> <!-- dialog_zhongbu -->
 
          </div> <!-- label-dialog -->

data数据：

 //批量导入
data(){
    return{
        thisObj: {}, //把change的this传给click
        isUploadflag: false, //上传按钮标志位，先点击
        result: [],
    }
}

excel表格内容大概是：

name	age	sex	numble
张三	12	男
李四	16	男	13838380438

选择文件按钮：

 filechoose() {
      var objFile = document.getElementById("fileid").files[0];
      var objStr = /\.(xlsx|xls|csv)$/;
      console.log("选文件", objFile);
      
      if (!objStr.test(objFile.name)) {
        this.$alert('选择的文件格式不对，请选对excel表格！', '警告', {
                confirmButtonText: '确定',
          });
        return false;
      }
      this.thisObj = objFile;
      console.log("选中的elsx文件", this.thisObj);

      //上传按钮
      this.$root.DataBus.setElsxFile(this.thisObj);
      this.isUploadflag = true;
      // this.$message({
      //     message: '已上传文件，可继续下一步！',
      //     type: 'success'
      // });
    },

点击导入按钮：

 //批量导入
fileimport（）{

            let biaogesj = [],
              biaogename = [],
              biaogeImei = [],
              biaogeZWnumeber = [];
            var elsxData = this.$root.DataBus.elsxData;
            var objFile = this.thisObj;
            var objStr = /\.(xlsx|xls|csv)$/;
            console.log("objFile身份", objFile); 

            // if (this.isUploadflag == false) {
            //     this.$alert('请先点击上传按钮！', '警告', {
            //           confirmButtonText: '确定',
            //     });
            //     return;
            // }else 
            if(objFile === undefined || objFile === null || objFile === {}){
                this.$alert('没有选中任何文件 或 格式选中错误', '警告', {
                    confirmButtonText: '确定',
                });
                return false;  
            }else 
            if(!objStr.test(objFile.name)){
                this.$alert('上传格式错误', '警告', {
                    confirmButtonText: