• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

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

程序人生 新概念 6个月前 (10-30) 2297次浏览 1个评论 扫描二维码

安卓系统和 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 参数可以传入以下参数

说明
doc doc 格式
docx docx 格式
xls xls 格式
xlsx xlsx 格式
ppt ppt 格式
pptx pptx 格式
pdf pdf 格式

新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在【微信小程序】里小程序实现文件的预览如pdf,word,以PDF文件为例
喜欢 (9)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 签到成功!签到时间:2020-11-01 11:16:24,每日打卡,生活更精彩哦~
    新概念2020-11-01 10:44 回复 Mac OS X | Chrome 86.0.4240.111