VUE3.X – 如何实现文件下载功能

vue 下载文件的大概思路就是后台返回数据流,前台向后端发的post请求,使用blob格式处理数据流进行下载即可

代码如下


const handleDown = async (title: string) => {
    modalData.spinDisplay = true;
    modalData.spinTip = '报表下载中,请耐心等待。。。'
    let res: any = await http.request({ url: 'xxxx', method: 'POST', data: {  }, responseType: 'blob' });
    if (res.data.size > 0) {
        const blob = new Blob([res.data]);//处理文档流
        const fileName = title + '.pdf';
        const down = document.createElement('a');
        down.download = fileName;
        down.style.display = 'none';//隐藏,没必要展示出来
        down.href = URL.createObjectURL(blob);
        document.body.appendChild(down);
        down.click();
        URL.revokeObjectURL(down.href); // 释放URL 对象
        document.body.removeChild(down);//下载完成移除
    } else {
        message.warn('文件不存在');
    }
    modalData.spinTip = '报表生成中,请耐心等待。。。'
    modalData.spinDisplay = false;
}

以上这篇VUE3.X 如何实现文件下载功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。

原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/1653461739/