请问微信小程序这种pdf文件的保存，能单独加按钮点击保存吗？

佩奇飞上天

27157203

发布于
2024-03-26 湖北

而不是打开一个这种文件预览页面点击下载保存，想在小程序加个下载按钮，直接保存pdf文件，而不是进入这种预览页面，然后还要点击右上角三个点去保存

小程序前端 vue.js javascript react

阅读 1.1k

AI BotBETA

微信小程序中，直接保存 PDF 文件到本地存储（如文件系统）的功能是受到限制的，因为出于安全和用户体验的考虑，微信小程序不允许无用户交互的直接下载文件。这意味着，用户通常需要通过某种形式的交互（如点击一个按钮）来触发文件的下载或保存。

但是，你可以通过以下步骤在小程序中实现一个自定义的下载按钮，并引导用户保存 PDF 文件：

使用 wx.downloadFile API：你可以使用微信小程序的 wx.downloadFile API 来下载文件。这个 API 可以让你在服务器端获取文件的 URL，并在客户端下载文件。

wx.downloadFile({
  url: '你的PDF文件URL', // 你的PDF文件的链接
  success: function (res) {
    // 下载成功后的处理
    const filePath = res.tempFilePath; // 下载文件的临时路径
    // 你可以在这里添加代码来处理文件，例如保存到本地存储
  },
  fail: function (err) {
    // 下载失败的处理
  }
});

处理下载的文件：在 success 回调函数中，你可以获取到下载文件的临时路径。然而，由于微信的安全策略，你不能直接访问或保存这个临时文件到用户的设备上。但你可以让用户选择将这个临时文件保存到他们的设备上，或者你可以在服务器端实现一个文件上传的接口，让用户上传这个文件。
添加自定义下载按钮：在你的小程序界面上，你可以添加一个按钮，当用户点击这个按钮时，触发上述的 wx.downloadFile 调用。这样，用户就不需要进入预览页面，而是直接通过你的按钮下载文件。

请注意，由于微信的策略可能会变化，建议查阅最新的微信小程序开发文档以获取最准确的信息。此外，实现这样的功能可能需要用户授权和遵守微信的相关政策和指导原则。

2 个回答

得票最新

陟上晴明

21.4k144991

发布于
2024-03-26 浙江

✓ 已被采纳

试试看 wx.saveFileToDisk 这个API?

这里是官方提供的一个Demo 👉 开发指引 / 对象存储 / 微信小程序 / 下载文件

async onLoad() {
    const result = await this.downloadFile('cloud://test.png',function(res){
      console.log(`下载进度：${res.progress}%，已下载${res.totalBytesWritten}B，共${res.totalBytesExpectedToWrite}B`)
      // if(res.progress > 50){ // 测试文件下载一半就终止下载
      //   return false
      // }
    })
    wx.saveFile({
      tempFilePath: result.tempFilePath
    }).then(console.log)
  },
  /**
   * 下载微信云托管对象存储到本地
   * @param {*} fileID 对象存储文件ID
   * @param {*} onCall 上传回调，文件上传过程监听，返回false时会中断上传
   */
  downloadFile(fileID, onCall = () => {}) {
    return new Promise((resolve, reject) => {
      const task = wx.cloud.downloadFile({
        fileID,
        success: res => resolve(res),
        fail: e => {
          const info = e.toString()
          if (info.indexOf('abort') != -1) {
            reject(new Error('【文件下载失败】中断下载'))
          } else {
            reject(new Error('【文件下载失败】网络或其他错误'))
          }
        }
      })
      task.onProgressUpdate((res) => {
        if (onCall(res) == false) {
          task.abort()
        }
      })
    })
  }
})