阅读 202

前端进行文件导出或下载(常用)

前言

我们写代码经常会遇到需要下载文件的情况,后台如果返回的是文件地址,可以直接通过window.open预览并下载本地。如果后台返回的是文件流的格式,可以通过如下方式下载文件

代码实现

可以直接复制使用,或者封装成方法。

let url = "我是一串url地址"
axios({
    method: 'get',
    url,
    responseType: "blob", // 响应的类型是blob
}).then(res => {
    new Response(res.data).text().then(text => {
        // 如果没有报错,就走下载逻辑
        if (text.indexOf("message") === -1) {
            // 一般下载的文件名称会在请求头中返回回来,如果没有这里可以自定义
            let downloadName = res.headers['content-disposition'].split('filename="')[1]
            let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); // 将服务端返回的文件流excel文件
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement("a"); // 创建a标签
            link.href = url;
            link.download = downloadName
            link.click();
            URL.revokeObjectURL(url);
        } else {
            // 报错信息
            console.log(JSON.parse(text).message)
        }
    })

})
复制代码
文章分类
前端
文章标签