vue-pdf，实现预览下载工具

npm install --save vue-pdf

页面中引入vue-pdf

<template>
	<van-popup v-model="showBottom" position="bottom">
		<van-cell title="预览" is-link @click='previewPDF()' />
		<van-cell title="下载" is-link @click='downPDF()' />
	</van-popup>
	<van-popup v-model="showCont" >
		<div class="cont">
			<pdf :src="src"></pdf>
		</div>
	</van-popup>
</template>
<script>
	import pdf from 'vue-pdf'
	export default {
		name: 'exercises',
		components: {
			pdf
		},
		data() {
			return {
				pdf_src:'',//pdf预览地址
				url: ''
				showBottom：false,//弹出预览或下载选择框
				showCont:false,
			}
		},
		methods:{
			previewPDF() {
				var url = this.url
				this.src = pdf.createLoadingTask(url)
				this.showCont = true
				this.showBottom = false
			},
			//预览
			previewPDF() {
			var url = this.url
				this.src = pdf.createLoadingTask(url)
				this.showCont = true
				this.showBottom = false
			},
			//下载
			downPDF() {
				var url = this.url
				var tempLink = document.createElement("a");
				tempLink.style.display = "none";
				tempLink.href = url;
				tempLink.setAttribute("download", '213123');
				if (typeof tempLink.download === "undefined") {
					tempLink.setAttribute("target", "_blank");
				}
				document.body.appendChild(tempLink);
				tempLink.click();
				document.body.removeChild(tempLink);
				this.showBottom = false
			},
		}
	}
</script>