pc企微、小程序预览文件[‘pdf‘, ‘xlsx‘, ‘xls‘, ‘doc‘, ‘docx‘, ‘ppt‘, ‘pptx‘]

需要在小程序开发者后台中添加服务器域名权限：管理->开发管理->开发者设置->服务器域名->修改->request合法域名、uploadFile合法域名、downloadFile合法域名添加对应的权限（如：https://image-test.xxxxx.work）

一、结构

html 复制代码

<text class="txt" data-item="{{item}}" catchtap="previewFile">{{item.name}}</text>

        item: {
          name: "2026年总结.docx"
          percentage: 100
          status: "finished"
          uid: 1768441444086
          url: "https://image-test.xxxxx.work/stg/data/saas-workorder-engine/1768441497151%28%E5%B7%B2%E5%AE%A1%E6%A0%B8%EF%BC%89Y25-%E.docx"
        }

二、事件处理

文件类型：['pdf', 'xlsx', 'xls', 'doc', 'docx', 'ppt', 'pptx']

javascript 复制代码

    async previewFile(e: any) {
      console.log('previewFile e-->', e);
      /**
       * 
        item: {
          name: "2026年总结.docx"
          percentage: 100
          status: "finished"
          uid: 1768441444086
          url: "https://image-test.xxxxx.work/stg/data/saas-workorder-engine/1768441497151%28%E5%B7%B2%E5%AE%A1%E6%A0%B8%EF%BC%89Y25-%E.docx"
        } 
      */
      const {url, name: originalFileName} = e.currentTarget.dataset.item;
      const arr = url.split('.')
      const ext = arr[arr.length - 1]
      const canPreview = ['pdf', 'xlsx', 'xls', 'pptx', 'docx']
      
      if (canPreview.includes(ext)) {
        // 检测是否在PC端
        const systemInfo = wx.getSystemInfoSync();
        const isPC = systemInfo.platform === 'windows'
    
        if (isPC) {
          wx.showLoading({title:"下载中..."})
          // PC端直接下载文件
          wx.downloadFile({
            url,
            success: res => {
              if (res.statusCode === 200) {
                // 保存到微信本地缓存，使用原始文件名
                const savedFilePath = `${wx.env.USER_DATA_PATH}/${originalFileName}`;
                const fs = wx.getFileSystemManager();
                // res.tempFilePath 是下载后的临时文件路径
                // copyFileSync: 复制文件，源文件仍存在
                // 同步复制文件到指定名称
                fs.copyFileSync(res.tempFilePath, savedFilePath);

                // 在PC端，使用 wx.saveFileToDisk 直接保存并打开文件
                wx.saveFileToDisk({
                  filePath: savedFilePath,  // 这里是源临时文件路径
                  success: saveRes => {
                    wx.hideLoading();
                    console.log('PC端保存磁盘并打开文档成功', saveRes);
                    wx.showToast({
                      title: `已保存: ${originalFileName}`,
                      icon: 'success',
                      duration: 2000
                    });
                  },
                  fail: saveErr => {
                    wx.hideLoading();
                    console.log('直接保存到磁盘失败，尝试备选方案', saveErr);
                    // 如果保存失败，使用原来的保存和打开流程作为备选方案
                    const FileSystemManager = wx.getFileSystemManager(); // wx.getFileSystemManager() 获取文件管理器实例
                    const backupSavedFilePath = `${wx.env.USER_DATA_PATH}/${originalFileName}`;
                    
                    // FileSystemManager.saveFile 方法确实会将 tempFilePath 对应的文件移动（或复制）到 filePath 指定的位置。
                    // saveFile: 转移文件，通常源临时文件会被清理
                    FileSystemManager.saveFile({
                      tempFilePath: res.tempFilePath, // 源临时文件路径
                      filePath: backupSavedFilePath, // 目标保存路径（带原始文件名）
                      success: innerSaveRes => {
                        wx.hideLoading();
                        wx.openDocument({
                          filePath: backupSavedFilePath, // 使用原始文件名的路径
                          fileType: ext, // 必须，默认是pdf，可选docx、xlsx、pptx等
                          success: openRes => {
                            console.log('PC端打开文档成功', openRes);
                          },
                          fail: openErr => {
                            console.log('PC端打开文档失败', openErr);
                            // 如果无法直接打开，提示用户文件已保存
                            wx.showToast({
                              title: `请到PC端下载查看`,
                              icon: 'none',
                              duration: 2000
                            });
                          }
                        });
                      },
                      fail: () => {
                        wx.hideLoading();
                        wx.showToast({
                          title: `请到PC端下载查看`,
                          icon: 'none',
                          duration: 2000
                        });
                      }
                    });
                  }
                });
              }
            },
            fail: (res) => {
              wx.hideLoading();
              wx.showToast({
                title: `请到ERP系统查看`,
                icon: 'none',
                duration: 2000
              });
            }
          });
        } else {
          // 小程序
          wx.showLoading({title:"下载中..."})
          wx.downloadFile({
            url,
            success: res=>{
              let Path = res.tempFilePath
              wx.openDocument({
                filePath: Path,
                fileType: ext, // 必须，默认是pdf，可选docx、xlsx、pptx等
                success: function (res) {
                  wx.hideLoading();
                  console.log('打开文档成功')
                },
                fail:function (res){
                  wx.hideLoading();
                  wx.showToast({
                    title: '请到PC端下载查看',
                    icon: 'none'
                  })
                }
              })
            },
            fail:function (res){
              wx.hideLoading();
              console.log(res);
            }
          })
        }
      } else {
        wx.showToast({
          title: '请到PC端下载查看',
          icon: 'none'
        })
      }
    }

三、API 知识点

wx.downloadFile(Object object)

小程序提供的 API，用于从网络上下载文件资源到本地。它通过发起一个 HTTPS GET 请求来获取文件，并返回文件的本地临时路径（临时路径仅在当前小程序本次启动期间有效，重启后路径会失效）。

使用限制

单次下载的文件最大为 200MB。
下载的文件可以是各种格式，但需确保服务端响应的 header 中应正确设置 Content-Type，以便客户端正确处理文件类型。
返回的临时文件路径可用于后续操作，比如预览文档、显示图片或上传等。若需长期保存，需调用其他 API（如 wx.saveFile）进行保存。
不支持使用 HTTP 协议，必须使用 HTTPS。
Header 中不能设置 Referer。

参数说明

url（必填）：要下载的文件资源的 URL，必须是 HTTPS 协议。
header（可选）：HTTP 请求的 Header，注意不能设置 Referer。
timeout（可选）：超时时间，单位毫秒，默认 60000（60 秒），从基础库 2.10.0 开始支持。
filePath（可选）：指定文件下载后存储的路径（本地路径），从基础库 1.8.0 开始支持。
enableProfile / enableHttp2 / enableQuic（可选）：分别用于开启性能调试、HTTP2 和 QUIC 协议支持，适用于特定平台和版本。
success / fail / complete（可选）：接口调用成功、失败和结束的回调函数。

object.success 回调函数

tempFilePath：临时文件路径 (本地路径)。没传入 filePath 指定文件存储路径时会返回，下载后的文件会存储到一个临时文件

filePath：用户文件路径 (本地路径)。传入 filePath 时会返回，跟传入的 filePath 一致

statusCode：开发者服务器返回的 HTTP 状态码，200成功

javascript 复制代码

wx.downloadFile({
  url: 'https://example.com/file.pdf',
  success(res) {
    const tempFilePath = res.tempFilePath;
    console.log('文件下载成功，临时路径：', tempFilePath);
    // 例如用 wx.openDocument 打开文档
  },
  fail(err) {
    console.error('文件下载失败', err);
  }
});

注意事项

下载的文件是临时文件，若需长期保存，应使用 wx.saveFile 将其保存到本地缓存目录。
不支持直接通过 Promise 风格调用，需使用回调函数处理结果。
若下载的是云存储文件，应使用 wx.cloud.downloadFile，而非 wx.downloadFile。

wx.saveFile(Object object)

微信小程序提供的 API，用于将临时文件保存到本地的 API 长期保存，调用成功后，它可以将临时路径（tempFilePath）下的文件保存为永久文件，保存成功后原临时路径将失效。不过，根据官方文档，该功能实际是通过 FileSystemManager.saveFile 接口来实现的，而不是直接通过 wx.saveFile 调用。

使用 FileSystemManager.saveFile 时，你需要先通过 wx.getFileSystemManager() 获取文件管理器实例，然后调用其 saveFile 方法。该接口的主要参数包括：

主要参数说明

tempFilePath （必填，字符串类型）：需要保存的临时文件路径，通常是调用如 wx.downloadFile 或 wx.chooseImage 等接口后获取的临时文件路径。
filePath （可选，字符串类型）：指定文件保存的目标路径。如果不填，系统会自动生成一个存储路径。
success （可选，函数类型）：保存成功的回调，返回结果中包含 savedFilePath，即文件保存后的本地路径。
fail（可选，函数类型）：保存失败的回调。
complete（可选，函数类型）：无论成功或失败都会执行的回调。

如需使用，典型流程为：通过下载或其他方式获取临时文件 → 调用 saveFile 保存为永久文件 → 之后可通过永久路径访问该文件。

FileSystemManager.saveFile 方法确实会将 tempFilePath 对应的文件移动（或复制）到 filePath 指定的位置。

javascript 复制代码

// FileSystemManager.saveFile 方法确实会将 tempFilePath 对应的文件移动（或复制）到 filePath 指定的位置。
// saveFile: 转移文件，通常源临时文件会被清理
wx.getFileSystemManager().saveFile({
  tempFilePath: '临时文件路径', // 例如通过 wx.downloadFile 获得的 res.tempFilePath
  filePath: '可选，指定存储路径', // 若不填，微信会默认存储到小程序的本地缓存目录
  success(res) {
    console.log('保存成功，文件路径为：', res.savedFilePath);
    // res.savedFilePath 即为保存后的本地文件路径，后续可用来读取或展示文件
  },
  fail(err) {
    console.error('保存失败', err);
  },
  complete() {
    console.log('保存操作完成');
  }
});

注意事项

该接口调用成功后，原来的 tempFilePath 将失效，后续操作应使用返回的 savedFilePath。
保存的文件大小不能超过 100MB，否则会报错（错误码 1300202）。
如果目标路径的上级目录不存在或没有权限，也会导致保存失败（对应错误码如 1300002、1300014 等）。
此接口不支持 Promise 风格调用，也不支持在小程序插件中使用。

如需更底层的文件操作控制，可使用 wx.getFileSystemManager().saveFile(object)，其参数与 wx.saveFile 类似。

wx.openDocument(Object object)

微信小程序提供的一个 API，用于在新页面中打开文档。通过该接口，开发者可以让用户预览或查看各类文档文件，比如 PDF、Word、Excel 等。

参数说明

wx.openDocument 接收一个对象作为参数，该对象支持以下常见字段（具体以官方最新文档为准）：

filePath（必填）：要打开的文档的本地临时路径或临时文件 ID，通常由 wx.downloadFile 或其他文件接口获取。
fileType（必填）：指定文档类型，比如 'pdf'、'doc'、'docx'、'xls'、'xlsx' 等。正确设置有助于更准确地打开对应格式的文档。
showMenu（可选）：是否显示右上角菜单，默认情况下，根据微信版本决定是否显示，可通过此参数手动控制。

使用示例

一般在小程序中，开发者会先通过 wx.downloadFile 下载文档到本地临时路径，然后调用 wx.openDocument 打开该文档。例如：

javascript 复制代码

wx.downloadFile({
  url: 'https://example.com/sample.pdf', // 文档网络地址
  success(res) {
    if (res.statusCode === 200) {
      wx.openDocument({
        filePath: res.tempFilePath, // 下载后的临时路径
        fileType: 'pdf', // 指定文件类型
        showMenu: true // 是否显示右上角菜单
      })
    }
  }
})

注意事项

文档路径必须是小程序可访问的临时路径或已保存的本地路径。
支持的文档格式依赖于微信客户端的版本和能力，常见的如 PDF、Office 文档一般都支持。
该接口支持 Promise 风格调用，也支持传入 success/fail/complete 回调。

wx.saveFileToDisk(Object object)

其功能是将文件系统中的文件保存到用户的磁盘上。根据官方开发文档的说明，该接口仅在 PC 端支持，也就是说，它一般用于微信 Windows 版或 Mac 版等桌面客户端环境，在手机端的小程序中是不可用的。

如需在小程序中使用该接口，通常的开发流程可能包括：

使用 wx.getFileSystemManager 获取文件管理器实例；
通过文件管理器操作（如读取、下载等）得到某个文件的本地临时或永久路径；
调用 wx.saveFileToDisk 并传入要保存的文件路径，将文件保存到用户电脑磁盘。

在PC端，使用 wx.saveFileToDisk 直接保存并打开文件。

// 检测是否在PC端

const systemInfo = wx.getSystemInfoSync();

const isPC = systemInfo.platform === 'windows' || systemInfo.platform === 'mac';

参数说明

filePath（必填）：待保存文件路径
success / fail / complete（可选）：接口调用成功、失败和结束的回调函数。

javascript 复制代码

const originalFileName = 'muzidigbig.pdf'

wx.downloadFile({
  url: 'https://example.com/sample.pdf', // 文档网络地址
  success(res) {
    if (res.statusCode === 200) {
      // 保存到微信本地缓存，使用原始文件名
      const savedFilePath = `${wx.env.USER_DATA_PATH}/${originalFileName}`;
      const fs = wx.getFileSystemManager();

      // res.tempFilePath 是下载后的临时文件路径
      // copyFileSync: 复制文件，源文件仍存在
      // 同步复制文件到指定名称
      fs.copyFileSync(res.tempFilePath, savedFilePath);

      wx.saveFileToDisk({
        filePath: savedFilePath,
        success(res) {
          console.log(res)
          wx.showToast({
            title: `已保存: ${originalFileName}`,
            icon: 'success',
            duration: 2000
          });
        },
        fail(res) {
          console.error(res)
        }
      })
    }
  }
})

四、总结

wx.downloadFile() 小程序提供的 API，用于从网络上下载文件资源到本地。它通过发起一个 HTTPS GET 请求来获取文件，并返回文件的本地临时路径。
wx.saveFile() 微信小程序提供的 API，用于将临时文件保存到本地的 API 长期保存，保存成功后原临时路径将失效。
wx.openDocument() 微信小程序提供的一个 API，用于在新页面中打开文档，开发者可以让用户预览或查看各类文档文件。
wx.saveFileToDisk() 其功能是将文件系统中的文件保存到用户的磁盘上直接保存并打开文件。根据官方开发文档的说明，该接口仅在 PC 端支持。