Skip to content

uniapp文件下载保存

概要

提示:uniapp文件下载保存

在Uni-app项目中,通常会涉及到文件的下载保存和在线预览。

在微信小程序中,wx.saveFile(Object object)接口已停止维护,建议使用uni.downloadFile方法进行文件下载,并配合uni.getFileSystemManager对象中的方法来处理文件。

技术细节

TIP

情况复杂,基本是一致的

1. base64在线预览/下载

vue
<script setup>
// 此处data为base64
const arrayBuffer = uni.base64ToArrayBuffer(data)
const fs = uni.getFileSystemManager()
const filePath = `${wx.env.USER_DATA_PATH}/jcReport.pdf`
try {
  fs.writeFileSync(
    filePath, // 临时文件路径
    arrayBuffer,
    'binary',
  )

  // 预览文件操作
  uni.openDocument({
    filePath, // 临时文件路径
    success: (res) => {
      console.log('打开PDF成功')
    },
    fail: (error) => {
      uni.showToast({
        title: '打开PDF失败',
        icon: 'none',
      })
      console.error('打开PDF失败:', error)
    },
  })

  // 保存文件操作
  const savedFilePath = fs.saveFileSync(filePath, filePath)
  if (savedFilePath) {
    uni.showToast({
      title: '保存PDF文件成功',
      icon: 'none',
    })
  }
} catch (e) {
  console.error(e)
  uni.showToast({
    title: '下载失败,稍后再试',
    icon: 'none',
  })
}
</script>

小结

提示:等待后续补充

小小棱镜,无限可能 | CC BY-NC-SA 4.0 协议