uni-app app端 webview 页面内blob下载无法正常下载

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app app端 webview 页面内blob下载无法正常下载

测试过的手机

iPhone12 iOS版本18.0.1 小米14

示例代码

<web-view v-if="url" ref="webviewRef" :src="url" @message="onWebViewMessage" />

操作步骤

  • app使用webview组件内嵌H5页面通过blob触发下载

预期结果

  • 正常下载

实际结果

  • 直接下载失败或下载无响应

bug描述

app端 webview 页面内点击按钮通过blob触发下载，该H5流程在浏览器正常下载文件，安卓系统直接通知下载失败，ios点击无响应


| 信息类别     | 详细信息         |
|--------------|------------------|
| 产品分类     | uniapp/App       |
| PC开发环境   | Mac              |
| PC版本号    | 14.5             |
| HBuilderX类型 | 正式             |
| HBuilderX版本号 | 4.36             |
| 手机系统     | 全部             |
| 手机厂商     | 华为             |
| 页面类型     | vue              |
| vue版本      | vue3             |
| 打包方式     | 云端             |
| 项目创建方式 | HBuilderX        |

Harmonyos Next教程
1 回复

在uni-app的App端，如果遇到webview页面内blob下载无法正常进行的问题，这通常是由于webview组件对blob URL的支持不足或者处理逻辑有缺陷。以下是一个基于uni-app的示例代码，展示如何在webview组件中处理blob下载。这个示例假设你已经有一个可以生成blob数据的接口，并且你希望在webview中触发下载。

1. 准备一个可以生成blob数据的接口

首先，你需要一个后端接口来生成blob数据。这里假设你的后端接口返回的是一个PDF文件的blob数据，URL为/api/getBlobData。

2. 在uni-app中使用webview组件

在uni-app的页面中，使用web-view组件加载你的HTML页面，并在该页面中处理blob下载。

<template>
  <view>
    <web-view :src="webviewUrl" @loaded="onWebviewLoaded"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: ''
    };
  },
  mounted() {
    this.webviewUrl = 'path/to/your/webview/page.html'; // 替换为你的HTML页面路径
  },
  methods: {
    onWebviewLoaded() {
      // 可以在这里执行一些操作，比如通知webview页面后端接口已经可用
      // 例如，通过postMessage传递信息给webview页面
      // this.$refs.webview.evalJS(`window.postMessage({message: 'backendReady'}, '*');`);
    }
  }
};
</script>

3. 在webview加载的HTML页面中处理blob下载

在你的HTML页面中，你需要处理来自uni-app的消息，并触发blob下载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webview Page</title>
  <script>
    window.addEventListener('message', async (event) => {
      if (event.data.message === 'backendReady') {
        try {
          const response = await fetch('/api/getBlobData');
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = 'document.pdf'; // 设置下载文件名
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        } catch (error) {
          console.error('Error downloading blob:', error);
        }
      }
    });
  </script>
</head>
<body>
</body>
</html>

以上代码展示了如何在uni-app的webview组件中处理blob下载。注意，由于uni-app的webview组件可能有自己的限制，确保你的环境支持这些操作，并根据实际情况调整代码。如果webview组件对blob URL的支持有限，考虑使用其他下载机制，如服务器端生成下载链接。

回到顶部