目錄

• 微信小程序預覽 word、excel、ppt、pdf 等文件
  • 預覽效果
  • 前言
    • 注意點
  • 實現代碼
  • 補充

微信小程序預覽 word、excel、ppt、pdf 等文件

預覽效果

前言

微信官方提供了相關的 API 來預覽常見文件，目前支持如下格式的文件

總結一下就是先用 wx.downloadFile API 把文件下載下來，再用 wx.openDocument API 把它打開

• wx.downloadFile：下載文件到本地
• wx.openDocument：新開頁面打開本地文檔

注意點

wx.downloadFile API 單次下載允許的最大文件為 200MB

• 網絡-使用說明（域名只支持 https (wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議）

• 可以結合 DownloadTask 相關 API 實現下載進度展示

需要在小程序后台配置 downloadFile 合法域名才能下載文件

實現代碼

以預覽 PDF 文件為例

• 下載文件需要一個等待過程，所以加上加載提示很有必要

const util = require('../../utils/util') // 引入封裝過的加載提示

Page({
    // 預覽文件
    previewFile(fileLink) {
        if(!fileLink) {
            return false
        }
        util.showLoading()
      
        // 單次下載允許的最大文件為 200MB
        wx.downloadFile({
            url: fileLink, // 地址已打碼，自己換個其他的地址（"https://www.xxxxx.com/file/測試通知.pdf"）
            success: function (res) {
                console.log(res, "wx.downloadFile success res")
                if(res.statusCode != 200) {
                    util.hideLoadingWithErrorTips()
                    return false
                }
                var Path = res.tempFilePath //返回的文件臨時地址，用於后面打開本地預覽所用
                wx.openDocument({
                    filePath: Path,
                    showMenu: true,
                    success: function (res) {
                        console.log('打開成功');
                        util.hideLoading()
                    }
                })
            },
            fail: function (err) {
                console.log(err, "wx.downloadFile fail err");
                util.hideLoadingWithErrorTips()
            }
        })
      
    }
})

util.js

/* 加載動畫相關 */
const showLoading = (tips = '加載中...') => {
  wx.showNavigationBarLoading()
  wx.showLoading({
    title: tips,
  })
}

const hideLoading = () => {
  wx.hideLoading()
  wx.hideNavigationBarLoading()
}

const hideLoadingWithErrorTips = (err = '加載失敗...') => {
  hideLoading()
  wx.showToast({
    title: err,
    icon: 'error',
    duration: 2000
  })
}

module.exports = {
  showLoading: showLoading,
  hideLoading: hideLoading,
  hideLoadingWithErrorTips: hideLoadingWithErrorTips,
}

補充

每次點擊都要重新下載文件很不友好，可以考慮把文件地址存下來，如果下過了就直接打開

• 參考博客：微信小程序預覽pdf，頁面緩存下載過的pdf

個人擴展思路：

第一次點擊調用 wx.downloadFile 將返回的文件本地地址存到 localStorage 緩存里，每次點擊前去 localStorage 里看一下有沒有這條數據的本地地址，有的話就直接調用 wx.openDocument 打開，打開失敗函數里判斷下是不是本地文件已經清理掉了，清理掉了就重新下載再打開