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

时间：2020-07-14 01:13:39 收藏：0 阅读：2008

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

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