uni-app中使用web-view预览pdf文件
前几天在开发的时候,遇到一个预览pdf文件得需求。
1:首先安装插件,网盘地址 链接: https://pan.baidu.com/s/1muV5bbx95zhyyHPh-Ud_yQ 提取码: bcis 复制这段内容后打开百度网盘手机App,操作更方便哦
将下载的文件解压后放置与static同一目录,如下:
2:创建pdfview文件
<template> <view> <web-view :src="pdfUrl"></web-view> </view> </template> <script> export default { data() { return { pdfUrl:'', from:'' } }, onLoad(option) { /** * 浏览情景 */ // 浏览情景1:浏览本地的pdf文件 // this.pdfUrl = '/hybrid/html/web/viewer.html?file=./compressed.tracemonkey-pldi-09.pdf' let newurl = encodeURI(option.url) // 浏览情景2:浏览在线的pdf文件 this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(newurl) }, methods: { /** * 下载情景 */ // downloadPdfClick(){ // // 下载情景1:h5内嵌app,通过分享给朋友的方式进行下载 // if(this.from == 'app'){ // let item = 'http://自己的域名/hybrid/html/web/pdf.html?shareUrl='+encodeURIComponent(this.bgUrl) // +'&shareTitle=PDF文件'; // window.open(item); // return; // }else if(this.from == 'wx wq'){ // // 下载情景2:h5内嵌微信小程序,从h5页面跳转到小程序页面后,然后通过调用小程序原生API进行下载 // // 注意: 先要引入微信jssdk [命令: npm install jweixin-module] // // this.$wx.miniProgram.navigateTo({ // // url: '/pages/pdf/pdf_download?pdf='+ encodeURIComponent(this.bgUrl) //小程序页面链接 // // }); // } // } } } </script> <style> </style>
根据以上步骤,即可在线预览。ios和安卓均可生效。其中的url为你的文件地址。