axios 下载文件且携带参数(Excel、Word...)

余温无痕

已于 2022-12-23 11:57:31 修改

阅读量889

点赞数 1

分类专栏： vue axios 文章标签： javascript 前端 axios

于 2022-10-10 11:17:54 首次发布

本文链接：https://blog.csdn.net/u014678583/article/details/127241114

版权

vue 同时被 2 个专栏收录

40 篇文章 3 订阅

订阅专栏

axios

2 篇文章 0 订阅

订阅专栏

get和post方式中“responseType”添加层级要注意，具体使用方法在下方

1、get方式下载

axios.get("/product/xxx", {
            params: {
                so: good_name.value,
            },
            responseType: "blob", // 注意这，一定要加，不然会出现文件损坏，打不开现象
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})

2、post方式下载，此时responseType不能写在data参数对象中，要与data同级

axios.post("/product/xxx", { so: good_name.value }, {
            responseType: "blob", // 注意这，一定要加，不然会出现文件损坏，打不开现象
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})