x***@163.com
x***@163.com
  • 发布:2022-05-09 15:49
  • 更新:2024-05-11 16:08
  • 阅读:2718

uniapp APP + H5 在线预览文档 兼容 最麻烦的微信浏览器

分类:HBuilderX
    //在线预览文档  
    online_preview(){  

        //#ifndef H5  
        uni.showLoading({ title: '加载中...' })//出现加载中图标  
        let str = this.allUrl  
        uni.downloadFile({  
                url: str, //要预览的PDF的地址  
                success: function(res) {  
                    console.log('预览成功',res)  

                    if (res.statusCode === 200) {   
                        var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用  
                        uni.openDocument({  
                            filePath: Path, //要打开的文件路径  
                            showMenu: false, //右上角是否有可以转发分享的功能  
                            success: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开成功',  
                                    icon: 'none'  
                                })  
                            },  
                            fail: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开失败,请下载wps再试',  
                                    icon: 'none'  
                                })  
                                console.log('打开失败',res) //打开失败  
                            }  
                        })  
                    }  
                },  
                fail: function(res) {  
                    uni.hideLoading()//关闭加载中图标  
                    uni.showToast({  
                        title: '加载失败,请稍后再试',  
                        icon: 'none'  
                    })  
                    console.log('加载失败',res) //预览失败  
                }  
            })  
        // #endif  
        //#ifdef H5   
            let resultNew= encodeURIComponent(this.allUrl)  
            this.allUrl2 = 'http://view.officeapps.live.com/op/view.aspx?src='+ resultNew  
            window.open(this.allUrl2)  
        // #endif  
    },
3 关注 分享
BoredApe _Ccc 7***@qq.com

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 小璐不迷路 :
解决了吗最后你怎么预览的?
2024-05-11 16:08
小璐不迷路

小璐不迷路

H5 微信扫码 显示 An erroe occurred 改怎么解决
2023-11-27 10:41
小璐不迷路

小璐不迷路

回复 x***@163.com :
微信浏览器显示 An error occurred 改怎么解决啊
2023-11-27 10:40
7***@qq.com

7***@qq.com

回复 2***@qq.com :
要预览的文档地址
2023-08-02 14:18
2***@qq.com

2***@qq.com

this.allUrl 是什么?
2023-05-23 16:07
7***@qq.com

7***@qq.com

太感动了,既然是可以的
2022-10-26 11:59
x***@163.com

x***@163.com (作者)

例如:https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx

JS调用:window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx"));

JS调用(带水印):window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx") + "&watermark=" + encodeURIComponent("view.xdocin.com"));

可选参数
&pdf=true,word文档尝试以pdf方式显示,默认false

&watermark=水印文本,显示文本水印;"img:"+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png

&saveable=false,是否允许保存PDF,默认true

&printable=false,是否允许打印PDF,默认true

&copyable=false,是否允许选择复制内容,默认true

&toolbar=false,是否显示底部工具条,默认true

&title=自定义标题

&expire=30,预览链接有效期,单位分钟,默认永久有效

&limit=,限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效

&filename=文件名,辅助识别文档格式

&fontsize=字体大小(单位px),默认14,范围:6~58

&mtime=文件修改时间戳(如:1633093801,精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存
2022-05-10 09:15
x***@163.com

x***@163.com (作者)

如果H5出现
File not found
The URL of the original file is not valid or the document is not publicly accessible.
Verify the URL is correct, then contact the document owner.
Learn more
可以换成XDOC文档预览云服务
js调用方法 : window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("要预览的文件路径(要求必须是外网)"));
2022-05-10 09:12