本章节讲述的是怎样uniapp项目中实现在线预览文档功能。
web端: app端:
直接上干货:web-view组件,uinApp文档中有,不知道的朋友可以去官网查看哦。
web-view:
<template> <web-view :src="link"></web-view> </template> <script> export default { data() { return { link: ‘‘ }; }, onLoad(options) { if (options && options.link) { this.link = options.link; } } }; </script> <style></style>
要跳转的页面:
页面代码:
html:
<text class="btn" @tap="getFilePath(item.DocumentID)">查看</text>
js:
getFilePath(id) {
// 获取文件路径
partyWindow.getPartyKnowledgeFilePath({ID: id}).then(res => {
if (res.StatusCode === 200) {
let FilePath = res.Data.FilePath;
let HrefPath = ‘/static/pdf-reader/?file=‘ + FilePath;
// #ifdef H5
uni.navigateTo({
url: `/pages/webView/webView?link=${HrefPath}`
});
// #endif
// #ifndef H5
uni.navigateTo({
url: `/pages/webView/webView?link=${HTTP_SERVER_URL+HrefPath}`
});
// #endif
}
}).catch((e) => {
uni.showToast({
title: e.message,
icon: ‘none‘,
duration: 1000
});
});
},
这里的HTTP_SERVER_URLE,是我全局定义的变量,请求的地址。