uni-app h5环境文件流下载问题

在h5环境下，使用a标签方式下载后端返回的文件流，在浏览器上可以，但是打包H5嵌入到app上就不行，提示跳转到浏览器，这是什么原因，有大佬知道吗。

let blob = new Blob([fileData]);
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接

downloadElement.style.display = 'none'
downloadElement.href = href;
downloadElement.download = name; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象

开发环境及项目信息

类别	信息
开发环境	H5
版本号	未提及
项目创建方式	未提及

zlyuanteng 1楼•2 天前

在uni-app的H5环境中处理文件流下载问题，可以通过使用JavaScript的Blob对象和URL.createObjectURL方法来实现。以下是一个完整的代码案例，展示了如何从服务器获取文件流并在H5环境中触发下载。

步骤一：发送请求获取文件流

首先，我们需要使用uni.request方法向服务器发送请求以获取文件流。这里假设服务器返回一个二进制文件流。

uni.request({
    url: 'https://example.com/api/download', // 替换为你的文件下载接口
    method: 'GET',
    responseType: 'arraybuffer', // 关键：设置响应类型为arraybuffer
    success: (res) => {
        const arrayBuffer = res.data;
        handleDownload(arrayBuffer, 'filename.ext'); // 调用下载处理函数
    },
    fail: (err) => {
        console.error('下载失败:', err);
    }
});

步骤二：处理文件流并触发下载

接下来，我们定义一个handleDownload函数来处理文件流并触发下载。

function handleDownload(arrayBuffer, filename) {
    const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' }); // 创建一个Blob对象
    const url = URL.createObjectURL(blob); // 创建一个临时URL指向Blob对象

    // 创建一个隐藏的a标签并模拟点击以触发下载
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = filename; // 设置下载文件名

    document.body.appendChild(a);
    a.click();

    // 下载完成后释放URL对象
    setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }, 0);
}

注意事项

跨域问题：确保你的服务器支持CORS（跨源资源共享），否则在H5环境中可能会遇到跨域请求被阻止的问题。
文件类型：在Blob构造函数中，type属性可以根据实际文件类型进行设置，例如application/pdf、image/png等。如果不确定文件类型，可以使用application/octet-stream作为默认值。
错误处理：在实际应用中，应添加更多的错误处理逻辑，以处理网络错误、文件解析错误等情况。

通过上述代码，你可以在uni-app的H5环境中实现从服务器获取文件流并触发下载的功能。这种方法利用了现代浏览器的Blob和URL.createObjectURL API，提供了跨浏览器的兼容性。