uniapp微信小程序在web-view嵌入的uniapp H5页面中预览word文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序在web-view嵌入的uniapp H5页面中预览word文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在小程序中预览文件可以使用uni.uploadFile下载后再uni.openDocument打开预览，但uni.openDocument API是不支持H5的，这时候可能会想到使用微软在线预览，但是实际出来的效果会存在各种兼容性问题。因此我们需要在h5页面中跳回小程序然后走小程序的预览文件逻辑。文章来源地址https://www.toymoban.com/news/detail-509448.html

//预览按钮的方法
preview(url,name,type){
    // #ifdef H5
    if(["pdf","ppt", "pptx", "doc", "docx", "xls", "xlsx","txt"].includes(type)){
        jWeixin.miniProgram.navigateTo({
            url:'/pages/webview/preview?url='+url//这里就是跳回小程序的页面路由，随意
        })
    }else if(["jpg", "png","jpeg"].includes(type)){
        let arr = []
        arr[0] =url
        uni.previewImage({
            current: 0,
            urls: arr,
            longPressActions: {
                itemList: ['发送给朋友', '保存图片', '收藏'],
                success: function(data) {},
                fail: function(err) {
                    console.log(err.errMsg);
                }
            }
        });
    }else{
        uni.showToast({
            title:'不可预览',
            icon:'none'
        })
    }
    // #endif
},

//在小程序的preview路由中
<template>
    <view class="container">
        <web-view></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                finish:false
            }
        },
        onLoad(e) {
            var that=this
            if(e.url){
                // 先重置
                that.finish=false
                uni.downloadFile({
                    url:e.url,
                    success: (res) => {
                        var temp=res.tempFilePath
                        setTimeout(()=>{
                            uni.openDocument({
                                filePath:temp,
                                showMenu:true,
                                success() {
                                    that.finish=true
                                    console.log(that.finish);
                                }
                            })
                        },0)
                    }
                })
            }
        },
        
        onShow() {
            if(this.finish){
                uni.navigateBack({
                    delta:1,//返回层数，2则上上页
                })
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss">
.container {
        width: 100%;
        height: 100vh;
}
</style>

到了这里，关于uniapp微信小程序在web-view嵌入的uniapp H5页面中预览word文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！