vue-pdf vue预览pdf文档

安装

	npm install --save vue-pdf

pdf.vue

<template>
	<view>
		<!-- <pdf ref="pdf" :src="url"></pdf> -->
		<pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>
	</view>
</template>

<script>
	import pdf from 'vue-pdf'
	export default {
		components: {
			pdf
		},
		data() {
			return {
				url: 'https://telemedicine-files.oss-cn-shenzhen.aliyuncs.com/2021-10-02/%E5%8C%BB%E8%BE%85%E7%96%91%E9%97%AE-2021-08-11',
				numPages: 0, // 
			}
		},
		onLoad(options) {
			this.url = options.url
		},
		mounted() {
			this.getNumPages()
		},
		methods: {
			getNumPages() {
				let loadingTask = pdf.createLoadingTask(this.url)
				loadingTask.promise.then(pdf => {
					this.numPages = pdf.numPages
				}).catch(err => {
					console.error('pdf加载失败', err);
				})
			},
		}

	}
</script>

跳转pdf.vue的页面

	// 页面跳转
	openPage(url) {
		this.$u.route({
			url: url,
			params: {
				url: this.fileUrl//fileUrl:pdf地址
			}
		})
	},