uniapp blob下载如何实现

在uniapp中如何通过blob实现文件下载？我尝试使用uni.downloadFile下载文件后得到了临时路径，但需要将文件保存为blob对象以便进一步处理。请问具体应该怎么操作？是否可以通过URL.createObjectURL生成下载链接？有没有完整的代码示例？

2 回复

使用uni.downloadFile下载文件，然后通过uni.saveFile保存到本地。示例代码：

uni.downloadFile({
  url: '文件URL',
  success: (res) => {
    if (res.statusCode === 200) {
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        success: function (saveRes) {
          console.log('文件保存成功：' + saveRes.savedFilePath);
        }
      });
    }
  }
});

在UniApp中实现Blob下载，可以通过以下步骤完成：

1. 请求文件并获取Blob数据

使用uni.request获取文件数据，设置responseType为arraybuffer以接收二进制数据。

uni.request({
  url: 'https://example.com/file.pdf', // 文件URL
  method: 'GET',
  responseType: 'arraybuffer', // 关键：接收二进制数据
  success: (res) => {
    // res.data 为 ArrayBuffer 数据
    this.downloadFile(res.data, 'file.pdf');
  },
  fail: (err) => {
    console.error('下载失败', err);
  }
});

2. 转换并保存文件

将ArrayBuffer转换为Blob，使用uni.downloadFile或uni.saveFile保存到本地。

downloadFile(arrayBuffer, fileName) {
  // 将 ArrayBuffer 转为 Blob
  const blob = new Blob([arrayBuffer]);
  
  // 方法1：直接下载（仅支持部分浏览器环境，H5端适用）
  if (uni.getSystemInfoSync().platform === 'h5') {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
  } 
  // 方法2：保存到本地（App和微信小程序等）
  else {
    // 先转换为临时路径
    const filePath = `${uni.env.USER_DATA_PATH}/${fileName}`;
    uni.getFileSystemManager().writeFile({
      filePath: filePath,
      data: arrayBuffer,
      encoding: 'binary',
      success: () => {
        uni.openDocument({
          filePath: filePath,
          showMenu: true // 显示打开方式菜单
        });
      },
      fail: (err) => {
        console.error('保存文件失败', err);
      }
    });
  }
}

注意事项：

  • 平台差异：H5端可直接使用Blob下载，App和小程序需通过文件系统API保存。
  • 文件路径：使用uni.env.USER_DATA_PATH获取应用可写目录。
  • 格式支持：确保文件类型与设备兼容（如PDF、图片等）。

完整示例（H5 + App）：

// 统一下载方法
downloadFileFromUrl(url, fileName) {
  uni.request({
    url: url,
    responseType: 'arraybuffer',
    success: (res) => {
      // 判断平台
      if (uni.getSystemInfoSync().platform === 'h5') {
        const blob = new Blob([res.data]);
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
      } else {
        const filePath = `${uni.env.USER_DATA_PATH}/${fileName}`;
        uni.getFileSystemManager().writeFile({
          filePath: filePath,
          data: res.data,
          encoding: 'binary',
          success: () => {
            uni.showToast({ title: '下载成功' });
            uni.openDocument({ filePath: filePath });
          }
        });
      }
    }
  });
}

调用方式：

this.downloadFileFromUrl('https://example.com/doc.pdf', 'document.pdf');

此方法覆盖了H5和App端的主要场景，根据实际平台调整实现逻辑。

回到顶部