微信开发 文件下载 小程序中的ajax请求与pdf文件如何实现下载

微信开发 | 文件下载 | 小程序中的ajax请求与PDF文件如何实现下载

最新动态：截至2025年8月，微信小程序最新版本对文件下载功能进行了优化，现在支持更高效的大文件下载和断点续传功能，同时提升了PDF文件的兼容性表现。

小程序文件下载那些事儿

做小程序开发的朋友们应该都遇到过这样的需求：用户点击按钮后需要下载服务器上的PDF文件，听起来简单，但实际操作起来还是有不少坑要踩的。

先说说我们常见的几种文件下载方式：

1. 直接使用微信提供的downloadFile API
2. 通过ajax获取文件流再处理
3. 使用第三方云存储直链

今天重点聊聊前两种方式的实现,特别是如何正确处理PDF文件的下载。

基础版：直接使用downloadFile

这是微信官方推荐的方式,也是最简单直接的：

wx.downloadFile({
  url: '你的PDF文件地址',
  success(res) {
    if (res.statusCode === 200) {
      const filePath = res.tempFilePath
      wx.openDocument({
        filePath: filePath,
        fileType: 'pdf',
        success() {
          console.log('打开文档成功')
        }
      })
    }
  },
  fail(err) {
    console.error('下载失败', err)
  }
})

这种方式的优点是：

• 代码简洁
• 微信原生支持
• 自动处理缓存

但缺点也很明显：

• 必须是公开可访问的URL
• 无法添加自定义请求头
• 对需要鉴权的文件不友好

进阶版：ajax请求+文件下载

当你的PDF文件需要鉴权,或者后端返回的是文件流时，就需要用到这种方式了。

发起ajax请求获取文件

wx.request({
  url: '你的API接口',
  method: 'GET',
  responseType: 'arraybuffer', // 关键参数！
  header: {
    'Authorization': 'Bearer your_token',
    'Content-Type': 'application/json'
  },
  success(res) {
    if (res.statusCode === 200) {
      // 这里获取到的是ArrayBuffer数据
      const fileData = res.data
      this.saveFile(fileData)
    }
  }
})

保存文件到本地

saveFile(arrayBuffer) {
  const fs = wx.getFileSystemManager()
  const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.pdf`
  fs.writeFile({
    filePath,
    data: arrayBuffer,
    encoding: 'binary', // 重要！
    success() {
      wx.openDocument({
        filePath,
        fileType: 'pdf',
        success() {
          console.log('文件打开成功')
        }
      })
    },
    fail(err) {
      console.error('文件保存失败', err)
    }
  })
}

避坑指南

在实际开发中,我踩过不少坑，这里分享几个常见问题：

1. 中文文件名乱码：后端需要在响应头中设置Content-Disposition时使用URL编码

   Content-Disposition: attachment; filename*=UTF-8''%E6%96%87%E4%BB%B6%E5%90%8D.pdf

2. 大文件下载超时：微信默认请求超时时间是60秒，大文件需要调整：

   wx.request({
     // ...
     timeout: 300000 // 5分钟
   })

3. iOS/Android兼容性问题：部分Android机型对PDF渲染支持较差，建议添加错误处理：

   wx.openDocument({
     filePath,
     fileType: 'pdf',
     fail() {
       wx.showToast({
         title: '暂不支持预览，请下载后查看',
         icon: 'none'
       })
       // 可以引导用户使用其他应用打开
     }
   })

4. 内存不足问题：处理大文件时，建议分块下载处理

性能优化小技巧

1. 下载进度提示：对于大文件，添加进度条提升用户体验

   wx.downloadFile({
     url: 'your_url',
     progress(res) {
       console.log('下载进度', res.progress)
       // 可以更新UI进度条
     }
   })

2. 文件缓存策略：避免重复下载相同文件

   

   const fileManager = wx.getFileSystemManager()
   try {
     const fileInfo = fileManager.statSync(filePath)
     if (fileInfo.size > 0) {
       // 直接使用缓存文件
       return
     }
   } catch (e) {
     // 文件不存在，需要下载
   }

3. 后台下载：对于特别大的文件，考虑使用后台下载任务

   const downloadTask = wx.downloadFile({
     // ...
   })
   // 可以暂停/继续下载
   downloadTask.abort()
   downloadTask.onProgressUpdate((res) => {
     console.log(res.progress)
   })

安全注意事项

1. 文件校验：下载后检查文件完整性

   // 简单的文件头校验
   const pdfHeader = new Uint8Array(arrayBuffer).subarray(0, 4)
   if (String.fromCharCode(...pdfHeader) !== '%PDF') {
     wx.showToast({ title: '文件损坏', icon: 'error' })
     return
   }

2. 敏感文件处理：避免将敏感文件长期存储在本地

   // 使用后删除临时文件
   wx.getFileSystemManager().unlink({
     filePath,
     complete() {
       console.log('临时文件已清理')
     }
   })

3. HTTPS强制要求：微信小程序要求所有网络请求必须使用HTTPS

实现小程序中的PDF文件下载,核心要点是：

1. 公开文件直接用downloadFile最简单
2. 需要鉴权的文件用request+arraybuffer组合
3. 注意不同平台的兼容性问题
4. 大文件要考虑性能优化
5. 始终注意安全性

随着微信小程序的不断更新,文件下载功能也在持续优化，建议开发者定期查看官方文档，获取最新API变更信息，希望这篇文章能帮你少走弯路，顺利实现文件下载功能！