h5展示pdf有效办法

uniapp 打包h5展示pdf的两种办法

第一种，使用pdf.js及viewer.js搭配

PDF.js (mozilla.github.io)

此方法的有点是提供一个工具栏可以放大、缩小、下载、预览页码……，当然这个工具栏可以通过修改viewer.html 中的toolbar display属性进行隐藏

第二种，使用pdfh5

pdfh5: web/h5/移动端PDF预览插件。可手势缩放、懒加载。支持npm install和script标签引入 (gitee.com)

此方法的优势是可以手势进行缩放

两种方法均已webview的形式进行页码加载，可以在webview层加其他想要的组件。

		data() {
			return {
				url:'',
				// viewerUrl:'/static/pdf/web/viewer.html',
				viewerUrl:'/static/pdf1/pdf.html',
				fileUrl:'',
				musicSrc:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				tips:'分享',
				handle:'',
				shadow:false
			}
		},
		onLoad(option) {
			let fileUrl = uni.getStorageSync('file_url')
			this.fileUrl =  fileUrl
			// h5，使用h5访问的时候记得跨域
			// #ifdef H5
			this.$request(this.$api.course.getFreeDetail,{id:option.id},'POST').then(res=>{
				if(res.code==1 ){
					console.log(res.data)
					uni.setNavigationBarTitle({
						title:res.data.name
					})
                                        //组装webview的请求地址
					this.url = `${this.viewerUrl}?file=${res.data.file_url}`;
					this.fileUrl = res.data.file_url
					console.log('onLoad',res.data.background_music)
					this.musicSrc = res.data.background_music
				}
			})
			// #endif
			
		},