前言

由于項目體積過大，以至于分包后也逐步超過了小程序的限制，所以將 h5 端的頁面以 web-view 的方式嵌入了小程序。這也產(chǎn)生了一些意料之外的問題，這里記一個關(guān)于文件預覽下載的問題。

在 h5 端中，針對圖片和視頻會使用 img、video 標簽達到預覽的效果，其余的文件類型會直接粗暴的調(diào)用 window.open 的方式打開，如果瀏覽器能夠解析則預覽，不能解析瀏覽器會默認下載。(這里有個問題，ios 的手機對于不能識別的文件會顯示亂碼)

嵌入小程序并配置了附件存儲的業(yè)務(wù)域名之后發(fā)現(xiàn)使用 android 手機調(diào)用 window.open 會出現(xiàn)白屏，ios 手機則沒有問題。 

嘗試使用 iframe 標簽達到類似的效果，但是在小程序中也是沒有效果的。

解決的方法

后面同事給了個思路，對于需要 window.open 打開的文件，直接跳轉(zhuǎn)到一個特定的小程序原生頁面，借助小程序的 api 預覽文件。如果小程序環(huán)境也無法預覽的文件，則使用小程序的 api 下載文件。

1. h5 頁面的處理

    import wx from 'weixin-js-sdk'

    if (
        process.env.TARO_ENV === 'h5' &&
        window.__wxjs_environment &&
        window.__wxjs_environment === 'miniprogram'
    ) {
        wx.miniProgram.navigateTo({
            url: `/pages/file/index?
            fileExt=${fileExt}
            &tokenId=${tokenId}
            &fileName=${fileName}
            &filePath=${encodeURIComponent(filePath)}
            `,
        })
    }
復制代碼

這里有幾個點需要注意一下

• 因為項目是通過 Taro 編譯出的，所以需要 process.env.TARO_ENV 判斷代碼類型
• 調(diào)用 wx sdk 的 wx.miniProgram.navigateTo api 可以直接調(diào)用。不需要在微信公眾平臺綁定域名權(quán)限驗證等。
• 跳轉(zhuǎn)路徑一定要寫完整 （因為少了一個 / 一直無法跳轉(zhuǎn)，一度懷疑這個思路行不通）
• 文件路徑一定要使用 encodeURIComponent 方法轉(zhuǎn)義。如果 filePath 路徑中包含一些參數(shù)，不轉(zhuǎn)義的情況下路由跳轉(zhuǎn)的過程中會丟失
• tokenId 用于權(quán)限鑒別（根據(jù)實際情況傳遞）

2. 小程序原生頁面的處理

    const { filePath, fileExt, tokenId, fileName } = this.queryParams
    const supports = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']

    // 支持預覽
    if (supports.includes(fileExt)) {

        const downloadResponse: any = await toPromise(wx.downloadFile, {
            url: filePath,
            header: {
                'cookie': `tokenId=${tokenId};`,
            }
        })
        const { tempFilePath } = downloadResponse
        const openResponse = await toPromise(wx.openDocument, {
            filePath: tempFilePath,
            fileType: fileExt
        })

    } else {
        // 該文件類型不支持預覽，下載
        const filePath = wx.env.USER_DATA_PATH + `/${fileName}`
        const saveResponse = await toPromise(wx.getFileSystemManager().saveFile, {
            filePath,
            tempFilePath,
        })
    }
復制代碼

這里有幾個點需要注意一下

• 對于有權(quán)限鑒定的文件一般是通過 cookie 實現(xiàn)的，小程序中需要手動設(shè)置 wx.downloadFile 的 header 設(shè)置 cookie

• 小程序中 api 的回調(diào)方式很容易造成回調(diào)地獄，可以包裝一下 promise

• 將文件保存在本地這個功能 wx.getFileSystemManager().saveFile 非常的不人性化。下載后很難找到下載的文件的具體地址。暫時沒有找到好的解決方案。