thinkphp6+vue3实现文件下载功能

问题描述

当我使用thinkphp6的下在函数时，在浏览器中直接访问url时，可以实现文件的正常下载，但是在vue3中使用axios发起请求时，报错，不能下载文件。

解决方案

thinkphp代码：

/**
 * 下载代码
 */
public function downloadCode():File
{
   return download('static/author.php', 'author.php');
}

vue3代码：

const downloadCode = (row:any) => {
    axios({
        method: "post",
        url: "/api/admin/app/downloadCode",
        baseURL: '/baseurl',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
            host:window.location.hostname,
            key:row.key
        },
        responseType: 'blob'
    }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'author.php');
        document.body.appendChild(link);
        link.click();
    }).catch(err => {
        console.log(err)
    })
}

问题总结

1. 在axios中，添加responseType: 'blob'这个属性，然后在.then中修改下代码即可
2. `responseType: 'blob'`表示响应的数据类型为Blob对象。Blob对象是一种二进制数据类型，可以用于存储大量的二进制数据，例如图片、音频、视频等。在文件下载时，服务器会返回一个二进制数据流，如果不设置响应类型为Blob对象，那么axios会将响应数据解析为字符串或JSON对象，无法直接用于文件下载。设置响应类型为Blob对象后，axios会将响应数据解析为Blob对象，然后可以使用`window.URL.createObjectURL`方法将Blob对象转换为URL，从而实现文件下载。