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

本章节讲述的是怎样uniapp项目中实现在线预览文档功能。

web端:                              app端:

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

 

 

直接上干货: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>

要跳转的页面:

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

 

 

 

页面代码:

 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组件

上一篇:iOS UILabel 文字 置顶/置底 实现


下一篇:IOS下AES128+ECB+PKCS7加密与网站上面加密结果不同