手机端预览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>
  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值