关于微信小程序保存文件的最佳解决方案

推荐使用的是FileSystemManager.saveFile,而这个FileSystemManager是通过wx.getFileSystemManager获取。

经过一些列的操作之后,终于可以使用FileSystemManager的saveFile方法了。

downloadFile(e) {
          
   
    const {
          
    item: {
          
    printImg } } = e.currentTarget.dataset;
    wx.showLoading({
          
   
      title: 下载中,
    })
    wx.cloud.downloadFile({
          
   
      fileID: printImg, // 文件 ID
      success: res => {
          
   
        // 返回临时文件路径
        console.log(res.tempFilePath);
        const fileManager = wx.getFileSystemManager();
        fileManager.saveFile({
          
   
          tempFilePath: res.tempFilePath,
          success: (res) => {
          
   
            console.log(res, 下载成功);
            wx.hideLoading();
          }
        })
      },
    })
  },

然后,重要是FileSystemManager.saveFile在成功执行之后的返回值,会有一个saveFilePath,也就是这个文件被保存到了哪儿。

我查阅了很多的资料,找到了一个目前我认为最优的解决方案。

downloadFile(e) {
          
   
    const {
          
    item: {
          
    printImg } } = e.currentTarget.dataset;
    wx.showLoading({
          
   
      title: 下载中,
    })
    wx.cloud.downloadFile({
          
   
      fileID: printImg, // 文件 ID
      success: res => {
          
   
        // 返回临时文件路径
        console.log(res.tempFilePath);
        const fileManager = wx.getFileSystemManager();
        fileManager.saveFile({
          
   
          tempFilePath: res.tempFilePath,
          success: (res) => {
          
   
            console.log(res, 下载成功);
            wx.hideLoading();
            wx.openDocument({
          
   
              filePath: res.savedFilePath,
              showMenu: true,
            })
          }
        })
      },
    })
  },

我分别在PC端和移动端展示一下。

首先是PC端,在点击下载文件按钮时。

会弹出一个文档的预览界面。

这里面有打印、另存为等一系列的操作,就可以实现预期的需求。

其实看一下这个文档的地址栏,也能看出来,其实这个saveFile的API保存的地址是不想让你找到的,路径里有AppData,这是个C盘的目录,默认其实是隐藏的,只有你设置过,才会显示。所以,我们需要找到更好的解决方式。

然后是移动端。

移动端同样点击下载文件按钮后,也弹出了一个预览文档的界面,重点是看右上角,当设置了openDocument这个API的showMenu属性为true之后,就会出现这三个点...。

点击这三个点...之后,会出现保存到手机的操作。

点击之后,就可以在自己的文件管理里,很明显的找到这个文件,如果不做这一步操作,你是不容易找到saveFile这个API的保存位置的。

目前,我觉得这是这好的解决方案了。我看到还有一些建议是,在saveFile的时候,将文件保存为一个图片,图片在进行保存的时候,是可以直接显式的保存到相册了。 然后再通过改后缀的方式,改回原来的文件后缀,很明显这样的方案,需要用户进行大量的自主操作,我觉得不太合适。

经验分享 程序员 微信小程序 职场和发展