vue3文件流下载方法
import { ElLoading } from 'element-plus';
import { saveAs } from 'file-saver';
export function oneClickUnzip(query) {
return request({
url: '/project/batchUpload',
method: 'get',
params: query,
responseType: 'blob',
});
}
// 验证是否为blob格式
export function blobValidate(data) {
return data.type !== 'application/json';
}
let downloadLoadingInstance;
function handleUnzip() {
downloadLoadingInstance = ElLoading.service({
text: '正在下载中,请稍候',
background: 'rgba(0, 0, 0, 0.7)',
});
oneClickUnzip(zipForm.value)
.then((response) => {
const isBlob = blobValidate(response);
if (isBlob) {
const blob = new Blob([response]);
saveAs(blob, '下载结果.xlsx');
proxy.$modal.msgSuccess('文件成功下载');
} else {
proxy.$modal.msgError('文件下载失败');
}
downloadLoadingInstance.close(); // 关闭下载loading
})
.catch((error) => {
console.error(error);
downloadLoadingInstance.close();
});
}
下面是接口成功返回文件流,失败会返回json格式,方法修改:
oneClickUnzip(zipForm.value) .then((response) => { // 检查是否为错误信息 const blob = response; const reader = new FileReader(); reader.onload = function () { try { // 尝试将 blob 转换成 JSON const result = JSON.parse(reader.result); // 如果能解析为 JSON,说明是错误信息 ElMessage.error(result.msg || '下载失败,请重试'); } catch (e) { // 如果解析失败,说明是正确的 Blob 文件流 saveAs(blob, '下载结果.xlsx'); // 这里替换文件名 ElMessage.success('文件下载成功'); } finally { downloadLoadingInstance.close(); } }; // 读取 Blob 内容 reader.readAsText(blob); }) .catch((error) => { console.error('请求失败:', error); ElMessage.error('请求出错,请稍后重试'); downloadLoadingInstance.close(); });

浙公网安备 33010602011771号