码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-07-14 01:00:01      阅读:674      评论:0      收藏:0      [点我收藏+]

标签:朋友   led   code   在线   代码   ifd   view   现在   ESS   

本章节讲述的是怎样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,是我全局定义的变量,请求的地址。

 

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

标签:朋友   led   code   在线   代码   ifd   view   现在   ESS   

原文地址:https://www.cnblogs.com/DeerLin/p/13296565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!