ie导出excel是html文件路径,前端通过文件流导入导出excel（兼容IE）

前端通过文件流导入导出excel(兼容IE)

api文件夹内新建config.js，封装导入导出的请求方法

import axios from 'axios'

...

/*

* 上传

* url:请求地址

* params:参数

* */

export function fileUpload(url, params = {},loading=true) {

return new Promise((resolve, reject) => {

service({

url: url,

method: 'post',

data: params,

headers: { 'Content-Type': 'multipart/form-data' }

}).then(response => {

resolve(response.data);

}).catch(error => {

reject(error);

});

});

}

/*

* json格式请求文件流导出excel文件

* url:请求地址

* params:参数

* */

export function exportFile(url,params,loading=true){

return new Promise((resolve, reject) => {

service({

url: url,

method: 'post',

data: params,

headers: { 'Content-Type':'application/json;charset=UTF-8'},

responseType: 'arraybuffer'

}).then(response => {

resolve(response);

}).catch(error => {

reject(error);

});

});

}

export default {

...

fileUpload,

exportFile

}

添加接口函数，并在创建index.js引入

// 引入工具类

import http from './config'

...

export const systemManage = {

...

// 用户导入导出excel的接口函数，添加接口地址

userImport(data) {

return http.fileUpload('sys/user/imp', data)

},

userExport(data) {

return http.exportFile('sys/user/exp', data)

},

}

页面中使用

accept=".xls, .xlsx"

ref="upload"

:multiple="false"

:before-upload="beforeUpload"

:show-file-list="false"

action

:limit="1"

:http-request="uploadFile"

>

导入用户

导出用户

import { systemManage } from "@/api/index";

export default {

data() {

return {};

},

methods: {

// 上传文件

uploadFile(item) {

let form = new FormData();

// 文件对象

form.append("excelFile ", item.file);

// 发送请求

systemManage

.userImport(form)

.then((res) => {

if (res.code == 200) {

this.$message.success("导入成功");

this.searchFunc();

} else {

this.$message.error(res.message);

}

this.$refs.upload.clearFiles();

})

.catch((err) => {

this.$refs.upload.clearFiles();

});

},

//excel导出

exportExcel(api) {

let data = {

// 传参

};

systemManage["userExport"](data)

.then((res) => {

console.log(res);

if (res.status == 200) {

var filename = decodeURI(res.headers["content-disposition"]).split(

"="

)[1];

let contenttype =

filename.substring(filename.lastIndexOf("."), filename.length) ===

"xlsx"

? "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"

: "application/vnd.ms-excel;charset=utf-8";

var blob = new Blob([res.data], {

type: contenttype,

});

if (window.navigator.msSaveOrOpenBlob) {

// ie

navigator.msSaveBlob(blob, filename);

} else {

var downloadElement = document.createElement("a");

var href = window.URL.createObjectURL(blob); //创建下载的链接

downloadElement.href = href;

downloadElement.download = filename; //下载后文件名

document.body.appendChild(downloadElement);

downloadElement.click(); //点击下载

document.body.removeChild(downloadElement); //下载完成移除元素

window.URL.revokeObjectURL(href); //释放掉blob对象

}

this.$message.success("导出成功");

} else {

this.$message.error(res.message || "获取失败");

}

})

.catch(() => {});

},

},

};

注：在响应头的Content-Disposition获取文件名和后缀，需要后端设置Access-Control-Expose-Headers: Content-Disposition

标签：url,data,downloadElement,excel,兼容,res,message,filename,IE

来源： https://blog.youkuaiyun.com/Gemming_/article/details/111970007