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(); });