类型“AxiosResponse<any>”上不存在属性“blob”

Question

我一直在使用 React/Typescript 项目处理文件下载链接，并遇到了这个问题。

     axios({
            method: "post",
            url: "http://localhost:8080/test",
            data: bodyFormData,
            headers: { "Content-Type": "multipart/form-data" },
            responseType: 'blob',
        })
            .then(res => res.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                // the filename you want
                a.download = 'test.xml';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                alert('your file has downloaded!')
            }).catch(function (e) {
                //handle error
                console.log(e);
            })

参考：通过jQuery.Ajax下载文件

当我尝试这样做时，Typescript 声称出现错误。我还尝试将 res.blob() 更改为 res.data.blob() 然后它不会声明错误，但浏览器控制台说 blob() 不是函数。

Answer 1

改变

res.blob()

到

new Blob([res.data])

Answer 2

对于 axios，您不需要使用，res.blob()因为您已经提供了 contentType 标头。您可以直接使用响应数据

 axios({
        method: "post",
        url: "http://localhost:8080/test",
        data: bodyFormData,
        headers: { "Content-Type": "multipart/form-data" },
        responseType: 'blob',
    })
        .then(res => { 
            const blob = res.data
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            // the filename you want
            a.download = 'test.xml';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            alert('your file has downloaded!')
        }).catch(function (e) {
            //handle error
            console.log(e);
        })