手机端预览pdf的那些事

Hello,大家周末好，最近在写项目中遇到了手机端预览pdf的问题今天在这里给大家分享一下。

  我遇到的问题分为2种：
  ios：X一下的机型使用window.open来在手机端打开不能滑动文件，X以上机型就可以正常滑动文件
  安卓：点击直接是下载下来到手机上的可以说是不能正常查看的。

解决方法：

  先下载依赖：cnpm install pdfjs-dist --save
  然后：//这是封装的组件，使用就很简单只需要穿一个 url 参数也就是pdf的链接然后根据项目需求来控制组件的显示和隐藏
			<template>
			  <div id="container">
			      <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
			  </div>
			</template>
			<script>
			import PDFJS from 'pdfjs-dist'
			export default {
				props:['url'],
				data () {
					return {
						title: '',
						pdfDoc: null,
						loadding: false,
						pages: 0
					}
				},
				methods: {
					renderPage (num) {
						let _this = this
						this.pdfDoc.getPage(num).then(function (page) {
							let canvas = document.getElementById('the-canvas' + num)
							let ctx = canvas.getContext('2d')
							let dpr = window.devicePixelRatio || 1
							let bsr = ctx.webkitBackingStorePixelRatio ||
									ctx.mozBackingStorePixelRatio ||
									ctx.msBackingStorePixelRatio ||
									ctx.oBackingStorePixelRatio ||
									ctx.backingStorePixelRatio || 1
							let ratio = dpr / bsr
							var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
							canvas.width = viewport.width * ratio
							canvas.height = viewport.height * ratio
							canvas.style.width = viewport.width + 'px'
							canvas.style.height = viewport.height + 'px'
							ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
							var renderContext = {
								canvasContext: ctx,
								viewport: viewport
							}
							page.render(renderContext)
							if (_this.pages > num) {
								_this.renderPage(num + 1)
							}
						})
					},
					loadFile (url) {
						let _this = this
						PDFJS.getDocument(url).then(function (pdf) {
								_this.pdfDoc = pdf
								_this.pages = _this.pdfDoc.numPages
								_this.$nextTick(() => {
								_this.renderPage(1)
							})
						})
					}
				},
				mounted () {
					this.loadFile(this.url);
				}
			}
			</script>
			 
			<style scoped>
			canvas {
			  display: block;
			  border-bottom: 1px solid black;
			}
			</style>