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

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

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

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

class="pull-right"

icon="el-icon-upload"

type="primary"

size="mini"

@click="importFile()"

>批量导入

class="pull-right right-10"

icon="el-icon-download"

type="primary"

size="mini"

@click="downloadFile('档案模板')"

>模板下载

size="mini"

type="primary"

icon="el-icon-plus"

class="pull-right"

@click="addRow"

>新增

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

prefix-icon="el-icon-search"

v-model="FinQueryParams.archiveFilter"

size="mini"

>

:apiURL="fileUploadUrl"

ref="refFileUpload"

:Refresh="Refresh"

:OtherParams="{brandId: QueryParams.BrandID}"

>

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 => {<