UNIAPP在线预览PDF文档DCloud插件
UniApp 在线预览PDF&插件使用
该实现方式基于pdf.js,使用网页嵌套web-view标签。
插件优点:内容懒加载,可自行决定工具栏内容,@message能监听用户操作,支持H5、安卓、iOS、PC
缺点:基于pdfjs本地文件占用体积4mb,部分源码不易理解,不支持深度监听
插件地址:PDF播放器
使用方式
为了更好的了解插件使用方式我已上传示例:
将插件导入HbuilderX中可以看见以下目录
其中hybrid文件夹是静态HTML用于承载PDF预览时的页面
pages则是你的页面文件夹
实现步骤
- 下载示例复制hybrid文件夹到你项目的第一层级(与pages同级)
- 复制pages中pdfviewer文件夹至pages中
- 在pages.json中配置好你的路由:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path": "pages/pdfviewer/index","style": {"navigationBarTitleText": "PDF播放器","app-plus": {"bounce": "none"}}}],
4.在你需要跳转至PDF预览的页面写入@click使用uni.navigateTo并带上PDF的url地址和title
可自定义部分
1.在hybrid文件夹中web文件夹内有html静态文件,可以加入js或修改部分html结构,亦或修改工具栏。
2.在uni与静态页面通信上修改的部分代码在viewer.js中
最后:这种预览方式在使用cdn缓存时可能导致iOS端文件加载失败,解决方式:不使用缓存
鸣谢:感谢各位大佬的开源代码。
UNIAPP在线预览PDF文档DCloud插件相关推荐
- 加载js文件,在线预览pdf文档
加载js文件,在线预览pdf文档 效果演示 环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码 效果演示 首先,先展示效果图 环境要求 Tomcat8.5 [注意]:T ...
- vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
- 安卓手机如何在线预览PDF文档
需要当我们上传到服务器上一个PDF文档发,在苹果手机和网页上都能正常的打开,但是一到安卓手机上就会出现下面的问题. 还得需要我们下载查看,无法在线查看,就我这个臭脾气再重要的文件我也不回去下载查看的. ...
- vue配合element 实现在线预览pdf文档
使用插件 npm install --save vue-pdf <template><div id="app"><el-button type=&qu ...
- Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是 把WORD文 ...
- Android实现在线预览office文档(Word,Pdf,excel,PPT.txt等格式)
1.概述 我们都知道,Android原生并没有提供浏览office文档格式的相关Api,在安卓端想要实现在线预览office文档的功能显然很是复杂,我们手机安装QQ浏览器时,在手机打开office文档 ...
- web项目使用OpenOffice实现前端在线预览office文档(超详细)
超详细的OpenOffice实现前端在线预览office文档记录 最近搞一个数字化共享平台,是一个java web项目,使用框架ssm,其中项目有一个需要在线预览PDF.excle.ppt.word文 ...
- 渲染预览PDF文档,轻松搞定,这方案真香!
渲染预览PDF文档,轻松搞定,这方案真香! 1.前言 2.列举一些文档预览解决方案: 3.列举一些文档解析生成解决方案: 4.案列赏析 5.准备工作: 6.模板讲解: 7.代码实现: 8.效果图: 9 ...
- 在线预览word文档
在线预览word文档 在线预览word文档 Java 使用wps将word文件转换pdf文件 转成PDF 在线预览word(转成pdf)前端展示 欢迎来提更好的意见 在线预览word文档 昨天下午组长 ...
最新文章
- python WindroseAxes 报错 has no attribute ‘Appender‘
- java面试题_208道Java面试题,
- 成都Uber优步司机奖励政策(3月28日)
- 电子元件 —— 二极管
- 多模态+Recorder︱多模态循环网络的图像文本互匹配
- 一)golang的单例模式
- 洛谷.U19464.山村游行wander(LCT 伪期望)
- Android 属性动画简单分析(一)
- 小招喵跑步(动态规划)
- Android Minui 相关API说明
- 字节跳动2018校招前端面试题
- Qt编写可视化大屏电子看板系统13-基础版
- 安卓手机如何把PDF文件转换为JPG图片
- 浅谈单片机、ARM和DSP的异同
- Unity 使用陀螺仪判断手机方向
- 动态加载当前年份的前五年后十年
- 6. ES6 字符串的新增方法
- 调用office web 365接口实现在线预览word文档,PDF,PPT
- vue中npm引入editor.md编辑器插件
- 【MATLAB】MATLAB实现 之 OFDM(正交频分复用技术)