本文实现文件下载的两种方式。第一种:文件流形式,第二种接口返回url地址
一、文件流形式( responseType: 'blob',)
1、js文件封装axios
export function controlsExport(params) { //微站站点导出
return request({
responseType: 'blob',
url: '/ebap-business/a/control/exportControl',
method: 'post',
data:params
})
}
2、vue文件引入axios api
import { batchImportList, batchImportExport } from '@/api/trading-resource'
vue文件调用方法
实现方案一:
methods: {
exportList(row) {
batchImportExport({
logId: row.id, // 记录id
exportFlag: 0, // 导出标识 0 代码失败
}).then((response) => {
const blob = new Blob([response.data]); //new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)
let result = response?.headers['content-disposition'];
let filename = result.split(';')[1].split('=')[1] || '导出失败数据.xlsx';
const fileName = decodeURIComponent(filename); //下载文件名称
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
});
},
}
实现方案二:
methods: {
// 导出历史记录数据
async exportList(row) {
this.exportLoading = true;
let res = await batchImportExport({
logId: row.id, // 记录id
exportFlag: 0, // 导出标识 0 代码失败
});
try {
let enc = new TextDecoder('utf-8');
res = JSON.parse(enc.decode(new Uint8Array(res.data))); //转化成json对象
this.$message.error(res.message);
} catch (error) {
this.downloadFile(res, () => {
this.$message.success('导出成功');
});
}
},
// 下载文件
downloadFile(res, callback, filename) {
let result = res?.headers['content-disposition'];
let fass = result.split(';')[1].split('=')[1] || '导出失败数据.xlsx';
// let fass = result.slice(result.indexOf('=') + 2, result.length - 1) || '导出失败数据.xlsx';
filename = filename || decodeURIComponent(fass);
let blob = new Blob([res.data], {
type: 'application/octet-stream',
});
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
} else {
var blobURL = window.URL.createObjectURL(blob);
var tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
callback && callback();
},
}
二、接口返回url地址(正常接口获取就行)
methods: {
handleDownload(row) {
loadFile({id:row.id}).then(res =>{
const ele = document.createElement('a');
ele.setAttribute('href', res.data); //设置下载文件的url地址
let str=res.data.substring(res.data.lastIndexOf("/"));
let str2=str.split('/')[1];
ele.setAttribute('download',str2);//用于设置下载文件的文件名
ele.click();
})
}
}
三、Vue 实现文件的上传
<template>
<el-form-item>
<div v-if="file.name" class="template-upload template-name">
<span class="file">
{{ file.name }}
</span>
<i class="el-icon-delete" @click.stop="file = {}"></i>
</div>
<label v-else>
<span class="el-button el-button--primary el-button--small template-upload">
上传文件
</span>
<input ref="update" hidden type="file" accept=".xlsx,.xls" @change="inputChange" />
</label>
<div class="template-form-remark">*最多支持一次性上传1000个资源</div>
</el-form-item>
</template>
methods: {
// 确定
async saveUploadData() {
if (!this.file.name) return this.$message.error('请先选择上传文件');
this.loading = true;
try {
this.form.append('classCode', this.templateForm.value);
await batchImportUpload(this.form);
this.$message.success('上传成功');
this.isShow = false;
this.loading = false;
this.$emit('upload');
} catch (error) {
this.loading = false;
this.$message.error(error?.message || error);
}
},
inputChange() {
const file = this.$refs.update.files?.[0];
this.$refs.update.value = '';
this.form = new FormData();
this.form.append('file', file);
this.file = file ?? this.file;
},
}