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

 

posted @ 2024-12-19 10:06  行走的蒲公英  阅读(51)  评论(0编辑  收藏  举报