1.首先创建一个发送按钮
<el-button tabindex="" :disabled="hu" ref="hu" v-show="!hu" class="hu elButton additional default" @click="exportHandler">
<i class=""></i>
<span>二维码</span>
</el-button>
2.创建一个点击事件,大部分代码可以复用 之后根据业务不同去修改
//二维码
exportHandler(data){
let self = this;
let params = {
id: data.id
};
//请求接口
axios({
method: 'get或者post',
url:'访问的接口',
params: params,
responseType: 'blob',//定义接口响应的格式,很重要
}).then(response => {
if (!response || !response.data) {
self.$message({
type: 'error',
message: "导出失败!"
});
return;
}
let blob = new Blob([response.data]);//response.data为后端传的流文件
let downloadFilename = "sasasa" + ".zip";//设置导出的文件名
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//兼容ie浏览器
window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
}else {
//谷歌,火狐等浏览器
let url = window.URL.createObjectURL(blob);
let downloadElement = document.createElement("a");
downloadElement.style.display = "none";
downloadElement.href = url;
downloadElement.download = downloadFilename;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(url);
}
self.$message({type: "success", message: '导出成功!'});
}).catch(err => {
self.$message({
type: 'error',
message: "导出失败!"
});
})
},
3.一定要导入
import axios from 'axios';
以上为测试,可以根据业务的需求进行更改