vue实现Excel文件的上传与下载功能的两种方式

一.前言项目中使用到比较多的关于Excel的前端上传与下载，整理出来，以便后续使用或分析他人。

1.前端vue:模板下载与导入Excel

导入Excel封装了子组件，点击导入按钮可调用子组件，打开文件上传的对话框，上传成功后返回结果

<el-col style="padding: 10px 0 20px;">    <el-button     class="pull-right"     icon="el-icon-upload"     type="primary"     size="mini"     @click="importFile()"    >批量导入</el-button>    <el-button     class="pull-right right-10"     icon="el-icon-download"     type="primary"     size="mini"     @click="downloadFile('档案模板')"    >模板下载</el-button>    <el-button     size="mini"     type="primary"     icon="el-icon-plus"     class="pull-right"     @click="addRow"    >新增</el-button>    <div class="pull-right">     <el-input      placeholder="请输入编码,名称"      prefix-icon="el-icon-search"      v-model="FinQueryParams.archiveFilter"      size="mini"     ></el-input>    </div>   </el-col>　　 <!-- 批量导入Dialog开始 -->  <uploadTemp   :apiURL="fileUploadUrl"   ref="refFileUpload"   :Refresh="Refresh"   :OtherParams="{brandId: QueryParams.BrandID}"  ></uploadTemp>  <!-- 批量导入Dialog结束 -->importFile() {  this.$refs.refFileUpload.open(); }　

向后台提交文件的方法

submitFile() {   const _this = this;   if (!_this.files.name) {    _this.$message.warning("请选择要上传的文件！");    return false;   }   let fileFormData = new FormData();   //filename是键，file是值，就是要传的文件   fileFormData.append("file", _this.files, _this.files.name);   if(_this.OtherParams){    const keys=Object.keys(_this.OtherParams);    keys.forEach(e=>{     fileFormData.append(e, _this.OtherParams[e]);    })   }   let requestConfig = {    headers: {     "Content-Type": "multipart/form-data"    }   };   AjaxHelper.post(_this.apiURL, fileFormData, requestConfig)    .then(res => {     console.log(res);     if (res.success) {      const result = res.result;      if (result.errorCount == 0 && result.successCount > 0) {       _this.$message({        message: `导入成功,成功${result.successCount}条`,        type: "success"       });       _this.closeFileUpload();       _this.Refresh();      } else if (result.errorCount > 0 && result.successCount >= 0) {       _this.Refresh();       _this.tableData = result.uploadErrors;       _this.successCount = result.successCount;       _this.innerVisible = true;      } else if (result.errorCount == 0 && result.successCount == 0) {       _this.$message({        message: `上传文件中数据为空`,        type: "error"       });      }     }    })    .catch(function(error) {     console.log(error);    });  },

这是上传文件的调用方法。