在【微信小程序】里小程序实现文件的预览如pdf，word，以PDF文件为例

安卓系统和 ios 系统通用小程序预览 pdf文件

html5 可以直接在浏览器预览 PDf 文件这个功能很好用，在小程序里面也可以直接预览。

方法一

在 iOS 下是可以直接打开 pdf 文件 url 进行预览的。如果你的小程序是公司主体，会多出一个业务域名的设置选项。

设置好域名后，再使用web-view 打开对应的文件就可以了。

要注意文件路径中不能含有中文，否则会无法正确打开。

<web-view src="{{url}}"></web-view>

在安卓下使用web-view 来预览 pdf 文件这个方法就行不通了，安卓系统会直接下载 pdf 文件，非常尴尬。

但这个方法唯一不好的地方是小程序web-view 会占满全屏

解决方法如下：

<style>
.but-link {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
}
</style>
<cover-view class="but-link">
      <button>关闭</button>
</cover-view>

方法二

本来以为 ios 预览 PDF 文件需要用到 webview 才能实现，最后捣鼓了好长时间 ios 用 webview 标签预览文件的时候一直显示空白。不知道为什么(至今也没能解决)，官方给出的答案是 webview 不能直接预览文件(也没搞明白嘛意思?)。后面翻了官方文档才知道小程序可以直接通过官方 api 直接预览.

预览文件需要调用 wx.downloadFile()和 wx.openDocument()这两个 API，记住了安卓和 ios 预览文件的时候都可以直接调用 wx.downloadFile()和 wx.openDocument()这两个 API 就可以了，不再需要用 webview 才能实现了。

预览本地文件

//预览本地文档
wx.chooseMessageFile({
    count: 1,     //能选择文件的数量
    type: 'file',   //能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以
    success(res) {
        let filePath = res.tempFiles[0].path; //微信临时文件路径
        wx.openDocument({
            fileType: 'pdf', // 需要写上文件类型才能预览，不让回找系统应用打开，体验不好
            filePath: filePath,
            showMenu: false,  //是否显示右上角菜单按钮  默认为 false
            success: function (res) {
                console.log('打开本地文档成功')
            },
            fail: function(error){
                console.log("打开本地文件失败")
            }
        })
    }

在线文件预览

wx.downloadFile({
     url: 'http://**.*****.***/reshaiwai/demo.pdf',      //要预览的 PDF 的地址
     success: function (res) {                           
       console.log(res);
       if (res.statusCode === 200) {                     //成功
         var Path = res.tempFilePath                     //返回的文件临时地址，用于后面打开本地预览所用
         wx.openDocument({
           fileType: 'pdf',       // 需要写上文件类型才能预览，不让回找系统应用打开，体验不好
           filePath: Path,                               //要打开的文件路径
           success: function (res) {
             console.log('打开 PDF 成功');
           }
         })
       }
     },
     fail: function (res) {
       console.log(res);                                  //失败
     }
 })

其他格式也可以用类似方法实现预览！

wx.openDocument()打开的文件格式有，fileType 参数可以传入以下参数