admin管理员组文章数量:1566979
使用uniapp 封装app,其中有在线预览功能:
在线预览vue文件:
<template>
<view class="content">
<!--异形屏时设置view占用通知栏-->
<!-- <view class="title-padding"></view>
<view class="report-header"></view> -->
<view class="report-area">
<u-tabs-swiper class="nav-tab" ref="tabs" :list="navList" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs-swiper>
<web-view class="web-frame" :webview-styles="webviewStyles" :src="navUrl"></web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[],
navList: [],
viewerUrl: '/hybrid/html/web/viewer.html',
current:0,
navUrl:'',
webviewStyles: {
progress: {
color: '#FF3333'
}
}
};
},
onLoad(option) {
this.list = JSON.parse(option.list);
this.init();
},
onShow() {},
methods: {
init(){
let list = this.list;
let navList = [];
for(let i in list){
let name = list[i].name;
if(name.indexOf('.')!=-1) {
name = name.substring(0, name.lastIndexOf('.'));
}
navList.push({name: name, url:list[i].url})
}
this.navList = navList;
this.setUrl(navList[0].url);
// 当打包成APP时解决webView头部显示问题
// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象
setTimeout(function() {
let wv = currentWebview.children()[0]
wv.setStyle({top:120,height:'100%',width:'100%'})
}, 1000); //如果是页面初始化调用时,需要延时一下
// #endif
},
/**
* 多个文件时头部多个文件tab切换
* @param {Object} index 文件index
*/
tabsChange(index){
this.current = index;
let list = this.navList;
for(let i in list){
if(i == index) {
this.navUrl = this.setUrl(list[i].url);
break;
}
}
},
setUrl(url){
if(this.isPdf(url)){
// h5,使用h5访问的时候记得跨域
// #ifdef H5
this.navUrl = `${this.viewerUrl}?file=${encodeURIComponent(url)}`;
// #endif
// 在安卓和ios手机上
// 判断是手机系统:安卓,使用pdf.js
// #ifdef APP-PLUS
if(plus.os.name === 'Android') {
this.navUrl = `${this.viewerUrl}?file=${encodeURIComponent(url)}`;
}
// ios,直接访问pdf所在路径
else {
this.navUrl = encodeURIComponent(url);
}
// #endif
}else{
this.navUrl = url;
}
},
isPdf(url){
let index = url.lastIndexOf(".");
if(index>0)
{
let tempUrl = url.substr(index+1, url.length);
if(tempUrl.toLowerCase()=='pdf') return true;
return false;
}
return false;
}
},
// onBackPress(e) {
// // #ifdef APP-PLUS
// var webElement = this.$el;
// console.log('webView '+webElement)
// return true;
// // #endif
// },
onReady(){
},
};
</script>
<style lang="scss">
uni-page-body,page,#app{
height: 100%;
// .title-padding {//解决异形屏顶部展示问题
// height: var(--status-bar-height);
// box-sizing: content-box;
// }
.content{
height: 100%;
width: 100%;
overflow: auto;
.report-header{
width: 100%;
height: 5%;
}
.report-area{
height: 95%;
display: flex;
width: 100%;
.nav-tab{
height: 45px;
width: 100%;
}
.web-frame{
margin-top: 45px!important;
height: 90%;
width: 100%;
}
}
}
}
</style>
上一页面跳转该页面预览时代码:
// 文件预览
previewFile(item){
let fileList = [{name:item.fileName, url:item.fileUrl}];
uni.navigateTo({
url:'/pages/index/sign/previewFile?list='+encodeURIComponent(JSON.stringify(fileList))
})
},
预览PDF文件时发现打包成APP后预览PDF直接下载。后引入pdf.js后可以在线预览
gitee上的链接uni-app-pdf: 在uni-app中使用pdf.js实现在手机上打开pdf
备份下载链接连接:链接:https://pan.baidu/s/1rQ5R9880vjjIh1sxy3fy7w 提取码:flm0
版权声明:本文标题:uniapp 在线预览文件 (使用web-view) 解决打包安卓APP后pdf下载才可查看问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726632075a1079256.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论