微信小程序文件预览下载和删除

前言

最近有一个需求是用小程序做一个资料库，要求能预览和下载pdf、ppt等

主要用到的几个api:

1. wx.downloadFile()
   https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
   将文件下载为临时文件（当小程序被关闭（完全退出，不是后台运行）后，系统可能会在适当的时候清理这些临时文件）
   单次下载允许的最大文件为 200MB
2. downloadTask.onProgressUpdate()
   监听下载进度
3. wx.openDocument()
   打开文件
4. FileSystemManager.saveFile(Object object)
   将临时文件保存到本地（wx.saveFile()停止维护了）
   也可以通过FileSystemManager.writeFile()将临时文件保存到本地，但是要先用FileSystemManager.readFile读取文件之后再用.writeFile()进行写入，注意FileSystemManager.readFile()读取文件的限制是100M
5. FileSystemManager.unlink(Object object)
   删除本地文件（有可能会受权限的影响，按照微信小程序官方文档的建议，将文件保存到小程序自己的合法存储区域，如wx.env.USER_DATA_PATH，这样在删除文件时，更有可能获得正确的权限。）

完整代码

//下载事件
downloadEvent() {
        let that = this
        let downUrl = 'https://www.qingyunkk.top/images/xuqiu.xlsx'
        // let downUrl = 'https://www.qingyunkk.top/images/zhiku1.pptx'
        const downloadTask = wx.downloadFile({
            url: downUrl,//要下载的文件地址
            success: function (res) {
                console.log(res);
                const tempPath = res.tempFilePath
                const fs = wx.getFileSystemManager();
                const writePath = `${wx.env.USER_DATA_PATH}${that.getFileNameFromUrl(tempPath)}`;
                // 保存文件
                fs.saveFile({
                    tempFilePath: tempPath,
                    filePath: writePath,
                    success: function (saveRes) {
                        const savedFilePath = saveRes.savedFilePath;
                        that.setData({
                            localUrl:savedFilePath
                        })
                        wx.openDocument({
                            filePath: savedFilePath,
                            showMenu: true,
                            success: function (openRes) {
                                console.log('文件打开成功:', openRes);
                            },
                        });
                    },
                    fail: function (err) {
                        console.error('保存文件失败:', err);
                        wx.showToast({
                            title: '保存失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            },
        })

        // 监听下载进度
        const listener = (res) => {
            // 更新下载进度用于页面展示
            this.setData({
                downloadProgress: res.progress
            });
            if(res.progress>=100){
                console.log("移除下载监听");
                downloadTask.offProgressUpdate(listener)
            }
            
        }
        downloadTask.onProgressUpdate(listener);
    },
    // 获取临时文件的文件名+后缀
    getFileNameFromUrl(url) {
        const lastIndex = url.lastIndexOf('/');
        if (lastIndex === -1) {
          // 若没有'/'，尝试查找'\\'，适用于 Windows 路径格式
          lastIndex = url.lastIndexOf('\\');
        }
        return url.substring(lastIndex);
      },

	//删除文件方法
    delectFile() {
        let that = this
        const fs = wx.getFileSystemManager();
        fs.unlink({
            filePath: that.data.localUrl,
            success: (res) => {
                console.log('文件删除成功:', res);
                wx.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 2000
                });
            },
            fail: (err) => {
                console.error('文件删除失败:', err);
                wx.showToast({
                    title: '删除失败',
                    icon: 'none',
                    duration: 2000
                });
            }
        });
    },