一般文件預(yù)覽除了圖片基本主要指office的文件預(yù)覽，不同文件（word、Excel、pdf）格式差異大，所以很難有共性。相對(duì)來(lái)說(shuō)PDF的預(yù)覽會(huì)相對(duì)簡(jiǎn)單一些，而且大都能轉(zhuǎn)換成pdf，我們就已pdf為例。小程序官方未提供，目前能找到和想到的方式，如下：

第一：采用wx.openDocument

wx.downloadFile({
    url: 'www.file.com/file.ppt',//可以是后臺(tái)傳過(guò)來(lái)的路徑
    success: function(res) {
        const filePath = res.tempFilePath
        wx.openDocument({
            filePath: filePath,
            success: function(res) {
                //成功
            }
        })
    }
})

效果：

說(shuō)明：這種實(shí)際上是先下載了臨時(shí)路徑，好處是pdf、word、Excel都能預(yù)覽，壞處是這種方式不一定能接受。

001

第二：webview+第三方pdf庫(kù)

pdfjs是個(gè)很好的pdf預(yù)覽的js庫(kù)，可以不用改造直接使用，簡(jiǎn)單部署個(gè)服務(wù)，或者通過(guò)nginx配置一下即可，這里我們直接通過(guò)cdn阿里oss文件服務(wù)器來(lái)運(yùn)行

pdfjs獲取地址：https://github.com/mozilla/pdf.js

oss服務(wù)demo：

https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file=https://byfile.disscode.cn/blog/2021/wx/pdf/01.pdf

小程序配置就很簡(jiǎn)單了，就是通過(guò)webview的方式調(diào)用pdfjs服務(wù)，只需傳遞pdf文件地址即可

<web-view src="https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={{url}}"></web-view>

002

備注：PDF.js訪問(wèn)遠(yuǎn)程服務(wù)器（非同域名下）報(bào)file origin does not match viewer's

需要將pdfjs下面的viewer.js中注釋掉代碼

// if (origin !== viewerOrigin && protocol !== 'blob:') {
//   throw new Error('file origin does not match viewer\'s');
// }

第三：延伸markdown文件渲染

markdown格式的內(nèi)容渲染已有組件可以支持，嘗試markdown的文件直接進(jìn)行渲染，這里直接找到第三方庫(kù)marked.js進(jìn)行嘗試

github地址：https://github.com/markedjs/marked

同樣制作oss服務(wù)的demo

https://byfile.disscode.cn/marked/marked.html?file=https://byfile.disscode.cn/blog/2021/wx/mk/%E3%80%90BLOG%E3%80%91hexo%E6%90%AD%E5%BB%BAblog%E6%95%99%E7%A8%8B.md

小程序同樣是webview的方式：

<web-view src="https://byfile.disscode.cn/marked/marked.html?file={{url}}"></web-view>

mk01

但是，markdown采用這種方式直接渲染文件，發(fā)現(xiàn)圖片、換行等樣式渲染還是有問(wèn)題的，所以期待更多嘗試。

備注：測(cè)試去掉域名的校驗(yàn)，要么就添加到小程序業(yè)務(wù)域名里面，否則不能正常訪問(wèn)

第四：代碼

github地址：https://github.com/dumplingbao/wx_demo.git

blog地址：https://dumplingbao.github.io/2021/07/20/wx-pdf/