微信小程序:webview + PDF预览

微信小程序:webview + PDF预览

2021-08-13 815
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序:webview + PDF预览
最近更新 2021年08月13日
资源编号 86680

微信小程序:webview + PDF预览

2021-08-13 小程序教程 0 815 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

一般文件预览除了图片基本主要指office的文件预览,不同文件(word、Excel、pdf)格式差异大,所以很难有共性。相对来说PDF的预览会相对简单一些,而且大都能转换成pdf,我们就已pdf为例。小程序官方未提供,目前能找到和想到的方式,如下:

第一:采用wx.openDocument

wx.downloadFile({
    url: \'www.file.com/file.ppt\',//可以是后台传过来的路径
    success: function(res) {
        const filePath = res.tempFilePath
        wx.openDocument({
            filePath: filePath,
            success: function(res) {
                //成功
            }
        })
    }
})

效果:

说明:这种实际上是先下载了临时路径,好处是pdf、word、Excel都能预览,坏处是这种方式不一定能接受。

第二:webview+第三方pdf库

pdfjs是个很好的pdf预览的js库,可以不用改造直接使用,简单部署个服务,或者通过nginx配置一下即可,这里我们直接通过cdn阿里oss文件服务器来运行

pdfjs获取地址:https://github.com/mozilla/pdf.js

oss服务demo:

https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file=https://byfile.disscode.cn/blog/2021/wx/pdf/01.pdf

小程序配置就很简单了,就是通过webview的方式调用pdfjs服务,只需传递pdf文件地址即可

<web-view src=\"https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={{url}}\"></web-view>

备注:PDF.js访问远程服务器(非同域名下)报file origin does not match viewer\’s

需要将pdfjs下面的viewer.js中注释掉代码

// if (origin !== viewerOrigin && protocol !== \'blob:\') {
//   throw new Error(\'file origin does not match viewer\\\'s\');
// }

第三:延伸markdown文件渲染

markdown格式的内容渲染已有组件可以支持,尝试markdown的文件直接进行渲染,这里直接找到第三方库marked.js进行尝试

github地址:https://github.com/markedjs/marked

同样制作oss服务的demo

https://byfile.disscode.cn/marked/marked.html?file=https://byfile.disscode.cn/blog/2021/wx/mk/%E3%80%90BLOG%E3%80%91hexo%E6%90%AD%E5%BB%BAblog%E6%95%99%E7%A8%8B.md

小程序同样是webview的方式:

<web-view src=\"https://byfile.disscode.cn/marked/marked.html?file={{url}}\"></web-view>

但是,markdown采用这种方式直接渲染文件,发现图片、换行等样式渲染还是有问题的,所以期待更多尝试。

备注:测试去掉域名的校验,要么就添加到小程序业务域名里面,否则不能正常访问

第四:代码

github地址:https://github.com/dumplingbao/wx_demo.git

blog地址:https://dumplingbao.github.io/2021/07/20/wx-pdf/

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序:webview + PDF预览 https://www.k4sc.com/86680.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务