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 的能力限制导致的。

原因分析:

  1. 平台限制:在 Android 和 iOS 的 WebView 环境中,浏览器对 Blob URL 的支持不完整,尤其是涉及文件下载时。WebView 默认不允许通过 blob: 协议触发文件下载,因为它无法像标准浏览器那样处理这类 URL 的下载请求。
  2. 安全策略:WebView 通常禁止自动下载文件,以防止恶意行为。Blob 或 Base64 数据需要转换为可访问的 URL,但 WebView 可能无法正确解析或保存这些数据到本地。
  3. uni-app 的 web-view 封装:uni-app 的 web-view 基于原生 WebView 封装,其下载行为受底层平台限制,无法直接支持 Blob 下载。

解决方案:

  • 使用 uni.downloadFile:如果文件来自网络,建议在 uni-app 侧(非 web-view 内部)使用 uni.downloadFile API 下载文件。这绕过了 WebView 的限制,直接调用原生下载能力。
  • 数据传递:如果 Blob/Base64 数据在 web-view 页面内生成,可通过 uni.postMessage 将数据传递到 uni-app 主页面,再由主页面使用 uni.downloadFileplus.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 解码为二进制
      });
    });
  }
}
回到顶部