UNIAPP在线预览PDF文档&DCloud插件

UniApp 在线预览PDF&插件使用

该实现方式基于pdf.js，使用网页嵌套web-view标签。
插件优点：内容懒加载，可自行决定工具栏内容，@message能监听用户操作，支持H5、安卓、iOS、PC
缺点：基于pdfjs本地文件占用体积4mb，部分源码不易理解，不支持深度监听

插件地址：PDF播放器

使用方式

为了更好的了解插件使用方式我已上传示例:

将插件导入HbuilderX中可以看见以下目录

其中hybrid文件夹是静态HTML用于承载PDF预览时的页面
pages则是你的页面文件夹

实现步骤

1. 下载示例复制hybrid文件夹到你项目的第一层级（与pages同级）
2. 复制pages中pdfviewer文件夹至pages中
3. 在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端文件加载失败，解决方式：不使用缓存
(跨域问题，这个问题比较常见，通常可以通过代理方式解决，或者同源策略。）
鸣谢：感谢各位在使用过程中提出的问题