vue实现H5预览PDF

引用: npm install --save vue-pdf

GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme

如下代码，请求后端设置返回响应类型为blod类型，服务端直接使用file_get_contents()返回文件的内容。

this.axios({
	method: 'get',
	data: {
		file_path: 'http://jucheng-linshi.oss-cn-qingdao.aliyuncs.com/ym/uid2/member/20200327/172c68add57163558b4329f8736469e8_0.pdf'
	},
	url: '/wechat.php/Basic/fileToFlow', // 请求地址
	responseType: 'blob' // 设置接收格式为blob格式
}).then(res => {
	console.log(res.data)
	that.pdfUrl = that.getObjectURL(new Blob([res.data]))
	console.log(that.pdfUrl)
})

详细参考代码如下：

<template>
	<div class="pdf">
		<div class="pdf-tab">
			<div class="btn-def btn-pre" @click.stop="prePage">上一页
			</div>
			<div class="btn-def btn-next" @click.stop="nextPage">下一页
			</div>
			<div class="btn-def" @click.stop="clock">顺时针
			</div>
			<div class="btn-def" @click.stop="counterClock">逆时针
			</div>

			<div class="btn-def" @click.stop="scaleD">放大
			</div>

			<div class="btn-def" @click.stop="scaleX">缩小
			</div>


		</div>
		<div>{{pageNum}}/{{pageTotalNum}}</div>
		<div>进度：{{loadedRatio}}</div>
		<div>页面加载成功: {{curPageNum}}</div>
		<pdf ref="pdf" :src="pdfUrl" :page="pageNum" :rotate="pageRotate" @password="password" @progress="loadedRatio = $event"
		 @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event">
		</pdf>
	</div>
</template>
<script>
	import pdf from 'vue-pdf'

	export default {
		name: 'Pdf',
		components: {
			pdf
		},
		data() {
			return {
				pdfUrl: '',
				// pdfUrl: 'static/123.pdf',
				pageNum: 1,
				pageTotalNum: 1,
				pageRotate: 0,
				// 加载进度
				loadedRatio: 0,
				curPageNum: 0,
				scale: 100, //放大系数
			}
		},
		mounted: function() {
			let that = this
			this.axios({
				method: 'get',
				data: {
					file_path: 'http://jucheng-linshi.oss-cn-qingdao.aliyuncs.com/ym/uid2/member/20200327/172c68add57163558b4329f8736469e8_0.pdf'
				},
				url: '/wechat.php/Basic/fileToFlow', // 请求地址
				responseType: 'blob' // 设置接收格式为blob格式
			}).then(res => {
				console.log(res.data)
				that.pdfUrl = that.getObjectURL(new Blob([res.data]))
				console.log(that.pdfUrl)
			})
		},
		methods: {
			getObjectURL(file) {
				let url = null
				if (window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.webkitURL != undefined) { // webkit or chrome
					try {
						url = window.webkitURL.createObjectURL(file)
					} catch (error) {

					}
				} else if (window.URL != undefined) { // mozilla(firefox)
					try {
						url = window.URL.createObjectURL(file)
					} catch (error) {

					}
				}
				return url
			},
			prePage() {
				var p = this.pageNum
				p = p > 1 ? p - 1 : this.pageTotalNum
				this.pageNum = p
			},
			nextPage() {
				var p = this.pageNum
				p = p < this.pageTotalNum ? p + 1 : 1
				this.pageNum = p
			},
			clock() {
				this.pageRotate += 90
			},
			counterClock() {
				this.pageRotate -= 90
			},
			password(updatePassword, reason) {
				updatePassword(prompt('password is "123456"'))
				console.log('...reason...')
				console.log(reason)
				console.log('...reason...')
			},
			pageLoaded(e) {
				this.curPageNum = e
			},
			pdfError(error) {
				console.error(error)
			},
			scaleD() {
				this.scale += 5
				// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
				this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
			},

			//缩小
			scaleX() {
				if (this.scale == 100) {
					return
				}
				this.scale += -5
				this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
				// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
			}

		}
	}
</script>