uniApp實現在線預覽office文件，web端也可以。---web-view組件

本章節講述的是怎樣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>