uniapp如何实现文件下载功能

在uniapp中如何实现文件下载功能？我想让用户能够点击按钮下载服务器上的PDF或图片文件，但不知道具体该怎么操作。需要支持安卓、iOS和H5多端兼容，最好能显示下载进度。求一个完整的代码示例，包括文件保存路径设置和权限处理部分。

2 回复

在uniapp中实现文件下载，可以使用uni.downloadFile()方法。示例代码：

uni.downloadFile({
  url: '文件URL',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  }
});

注意：下载的文件会保存到临时路径，如需保存到本地相册，还需调用uni.saveFile()。


在 UniApp 中实现文件下载功能，可以使用 uni.downloadFile API 下载文件到本地临时路径，再通过 uni.saveFile 或 uni.openDocument 保存或打开文件。以下是具体实现步骤和代码示例：

1. 使用 uni.downloadFile 下载文件

此 API 将网络文件下载到本地临时路径（仅应用内有效，重启后可能被清理）。

uni.downloadFile({
  url: 'https://example.com/file.pdf', // 替换为实际文件 URL
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功，临时路径:', res.tempFilePath);
      // 可选：自动保存到相册（仅图片）或用户目录
      this.saveFile(res.tempFilePath);
    }
  },
  fail: (err) => {
    console.error('下载失败:', err);
    uni.showToast({ title: '下载失败', icon: 'none' });
  }
});

2. 保存文件到本地（持久化）

使用 uni.saveFile 将临时文件保存到用户设备（长期有效）：

saveFile(tempFilePath) {
  uni.saveFile({
    tempFilePath: tempFilePath,
    success: (res) => {
      console.log('保存成功，路径:', res.savedFilePath);
      uni.showToast({ title: '文件已保存' });
    },
    fail: (err) => {
      console.error('保存失败:', err);
      uni.showToast({ title: '保存失败', icon: 'none' });
    }
  });
}

3. 直接打开文件（如 PDF、图片）

使用 uni.openDocument 直接预览文件（支持 PDF、图片等格式）：

uni.openDocument({
  filePath: tempFilePath,
  success: () => console.log('打开文件成功'),
  fail: (err) => console.error('打开失败:', err)
});

完整示例代码

// 在按钮点击事件中调用
downloadFile() {
  uni.downloadFile({
    url: 'https://example.com/sample.pdf',
    success: (res) => {
      if (res.statusCode === 200) {
        // 保存文件（持久化）
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({ title: `文件已保存至: ${saveRes.savedFilePath}` });
          }
        });
        
        // 或直接打开预览（二选一）
        // uni.openDocument({ filePath: res.tempFilePath });
      }
    },
    fail: (err) => {
      uni.showToast({ title: '下载失败', icon: 'none' });
    }
  });
}

注意事项：

  • 文件类型限制：部分平台（如 iOS）对文件类型有安全限制，需确保文件格式受支持。
  • 网络权限：确保 manifest.json 中配置了网络请求权限。
  • 路径有效期：tempFilePath 为临时路径，应用重启后可能失效，需及时保存。
  • 用户交互：下载前可添加权限申请或用户确认步骤，提升体验。

通过以上方法，即可在 UniApp 中实现完整的文件下载功能。

回到顶部