uniApp实现在线预览office文件，web端也可以。---web-view组件 _在线预览

非淡泊无以明志，非宁静无以致远。这篇文章主要讲述uniApp实现在线预览office文件，web端也可以。---web-view组件相关的知识，希望能为你提供帮助。
本章节讲述的是怎样uniapp项目中实现在线预览文档功能。
web端：app端：

文章图片

文章图片

直接上干货：web-view组件，uinApp文档中有，不知道的朋友可以去官网查看哦。
web-view：

< template> < web-view :src="https://www.songbingjia.com/android/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，是我全局定义的变量，请求的地址。

最后奉上pdf展示所需要的插件。
链接：https://pan.baidu.com/s/1xbXkxbx3OalrtJZF_Uwo_Q 提取码：deer
本插件需单独放入服务器中。