uni-app web-view下无法下载blob base64 会直接提示下载失败
uni-app web-view下无法下载blob base64 会直接提示下载失败
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.3.2 |
| 手机系统 | Android |
| 手机系统版本号 | Android 9.0 |
| 手机厂商 | 一加 |
| 手机机型 | 7 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤:
web-view下无法下载blob 会直接提示下载失败
预期结果:
web-view下无法下载blob 会直接提示下载失败
实际结果:
web-view下无法下载blob 会直接提示下载失败
bug描述:
【报Bug】web-view下无法下载blob 会直接提示下载失败
这个是bug还是真正的单纯的不支持 如果不支持请在文档中注明 别都弄好了 回头一看不能用 谢谢
更多关于uni-app web-view下无法下载blob base64 会直接提示下载失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
是在js中 new blob 然后获取后端的流么?
更多关于uni-app web-view下无法下载blob base64 会直接提示下载失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html
是的 已经解决了
回复 你好我好大家好: 怎么解决的呢
在 uni-app 的 web-view 组件中,直接下载 Blob 或 Base64 格式的文件确实存在限制,这并非 bug,而是由于平台安全策略和 web-view 的能力限制导致的。
原因分析:
- 平台限制:在 Android 和 iOS 的 WebView 环境中,浏览器对 Blob URL 的支持不完整,尤其是涉及文件下载时。WebView 默认不允许通过
blob:协议触发文件下载,因为它无法像标准浏览器那样处理这类 URL 的下载请求。 - 安全策略:WebView 通常禁止自动下载文件,以防止恶意行为。Blob 或 Base64 数据需要转换为可访问的 URL,但 WebView 可能无法正确解析或保存这些数据到本地。
- uni-app 的 web-view 封装:uni-app 的 web-view 基于原生 WebView 封装,其下载行为受底层平台限制,无法直接支持 Blob 下载。
解决方案:
- 使用 uni.downloadFile:如果文件来自网络,建议在 uni-app 侧(非 web-view 内部)使用
uni.downloadFileAPI 下载文件。这绕过了 WebView 的限制,直接调用原生下载能力。 - 数据传递:如果 Blob/Base64 数据在 web-view 页面内生成,可通过
uni.postMessage将数据传递到 uni-app 主页面,再由主页面使用uni.downloadFile或plus.io保存文件。 - Base64 处理:对于 Base64 数据,可尝试在 uni-app 侧解码并写入文件。例如,使用
plus.io将 Base64 字符串保存为本地文件。
示例代码(传递数据到 uni-app 侧): 在 web-view 页面内:
// 假设有 Base64 数据
const base64Data = 'data:image/png;base64,...';
uni.postMessage({ data: { type: 'download', base64: base64Data } });
在 uni-app 页面监听:
// 在 web-view 组件上监听消息
onMessage(event) {
const data = event.detail.data[0];
if (data.type === 'download') {
// 处理 Base64 下载,例如使用 plus.io 保存
const base64 = data.base64.split(',')[1]; // 去除前缀
const filePath = plus.io.convertAbsoluteUrl('_downloads/image.png');
plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
entry.createWriter((writer) => {
writer.write(base64); // 需将 Base64 解码为二进制
});
});
}
}

