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

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

主要介绍了vue实现Excel文件的上传与下载功能，本文通过两种方式给大家介绍的非常详细，具有一定的参考

借鉴价值,需要的朋友可以参考下

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

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

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

<el-col style="padding: 10px 0 20px;">

<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"

placeholder="请输入编码,名称"

prefix-icon="el-icon-search"

v-model="FinQueryParams.archiveFilter"

size="mini"

></el-input>

</div>

</el-col>

　　

<!-- 批量导入Dialog开始 -->

<uploadTemp

importFile() {

this.$refs.refFileUpload.open();

}　

向后台提交文件的方法向后台提交文件的方法

submitFile() {

const _this = this;

if (!_this.files.name) {

_this.$message.warning("请选择要上传的文件！");

return false;

}

fileFormData.append(e, _this.OtherParams[e]);

})

}

let requestConfig = {

headers: {

"Content-Type": "multipart/form-data"

}

};

AjaxHelper.post(_this.apiURL, fileFormData, requestConfig)