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

Posted 2020-12-17 Deer_Lin

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

 

 

最后奉上pdf展示所需要的插件。

链接：https://pan.baidu.com/s/1xbXkxbx3OalrtJZF_Uwo_Q 提取码：deer

 本插件需单独放入服务器中。

web-view--src需要保持一致。
如：服务器配置插件地址为：https://www.cnblogs.com/DeerLin。文件名为pdf.pdf,文件地址为：http://www.cnblogs.com/pdf.pdf
　　

<web-view src="https://www.cnblogs.com/DeerLin?file=http://www.cnblogs.com/pdf.pdf"></web-view>