vue-pdf

1.先下載

cnpm install vue-pdf --save-dev
複製代碼

2.在局部引入,使用

<template>
  <pdf src="./static/relativity.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}
</script>
複製代碼

例子：可實現放大縮小，翻頁功能

<template>
	<div class="all">
		<!-- <Mheader status="useAgreement" class="head" /> -->
		<header>
			<router-link to="/main/mine" slot="left" class="sprites_all sprites_back"></router-link>
			<div class="newbankCard">
				<span class="sprites_all sprites_back" @click="goBack"></span>
				<span class="pf_thick">{{clauseTitle}}</span>
			</div>
		</header>
		<div class="main">
			<!-- {{currentPage}} / {{pageCount}} -->
			<pdf :src="src" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>
			<!-- <button @click="changePdfPage(1)">+</button> -->
		</div>
		<ul class="footers">
			<li :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">
				<p>放大</p>
			</li>
			<li :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">
				<p>縮小</p>
			</li>
			<li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
				<p>上一頁</p>
			</li>
			<li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
				<p>下一頁</p>
			</li>
		</ul>

	</div>
</template>

<script>
	import pdf from "vue-pdf";
	import Mheader from "../Mheader";
	export default {
		components: {
			pdf,
			Mheader
		},
		data() {
			return {
				currentPage: 1,
				pageCount: 0,
				src: "", // pdf文件地址
				scale: 100, //放大係數
				idx: -1,
				clauseTitle: "",
				loadedRatio: 0
			};
		},
		created() {
			// 有時PDF文件地址會出現跨域的狀況,這裏最好處理一下
			let clause = this.$route.query.clause + "";
			switch(clause) {
				case "0":
					this.src = "../../../../static/clause/A1.pdf";
					this.clauseTitle = "使用者協定";
					break;
				case "1":
					this.src = "../../../../static/clause/A2.pdf";
					this.clauseTitle = "私隱政策聲明";
					break;
				case "2":
					this.src = "../../../../static/clause/C1.pdf";
					this.clauseTitle = "產品披露及風險聲明";
					break;
				case "3":
					this.src = "../../../../static/clause/C2.pdf";
					this.clauseTitle = "反洗錢及反恐融資聲明";
					break;
				case "4":
					this.src = "../../../../static/clause/C3.pdf";
					this.clauseTitle = "私隱政策聲明";
					break;
				case "5":
					this.src = "../../../../static/clause/C4.pdf";
					this.clauseTitle = "客戶協議";
					break;
				case "6":
					this.src = "../../../../static/clause/C5.pdf";
					this.clauseTitle = "使用者協定";
					break;
				case "7":
					this.src = "";
					this.clauseTitle = "積分計劃";
					break;
				default:
					this.src = "../../../../static/clause/A1.pdf";
			}
			// this.src = pdf.createLoadingTask(this.src);
		},
		methods: {
			// 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
			changePdfPage(val) {
				if(val === 0 && this.currentPage > 1) {
					this.currentPage--;
				}
				if(val === 1 && this.currentPage < this.pageCount) {
					this.currentPage++;
				}
			},
			goBack() {
				this.$router.go(-1);
			},
			// pdf加載時
			loadPdfHandler(e) {
				this.currentPage = 1; // 加載的時候先加載第一頁
			},
			//放大
			scaleD() {
				this.scale += 5;
				// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
				this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
			},

			//縮小
			scaleX() {
				if(this.scale == 100) {
					return;
				}
				this.scale += -5;
				this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
				// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
			}
		},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	@import "../../../assets/css/reset.scss";
	.all {
		padding: 0 0 rem(80);
		header {
			height: rem(88);
			position: sticky;
			top: 0;
			background-color: #fff;
			width: 100%;
			z-index: 400;
			.sprites_all {
				position: absolute;
				left: rem(30);
				top: rem(24);
				display: inline-block;
				width: rem(40);
				height: rem(40);
				background: url("../../../assets/img/transaction/transaction_icon.png") no-repeat;
				background-size: rem(400);
				vertical-align: bottom;
				background-position: 0 rem(-50);
			}
			.sprites_back {
				background-position: rem(-50) 0;
			}
			span {
				line-height: rem(86);
				font-size: rem(30);
				color: $text_3;
				// font-weight: bold;
			}
			border-bottom: 1px solid $line_color;
			.newbankCard {
				border-bottom: 1px solid $line_color;
			}
		}
		.main {
			overflow: auto;
		}
		.head {
			position: fixed;
			top: 0;
			height: rem(88);
		}
		.footers {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: rem(100);
			display: flex;
			z-index: 100;
			color: #333;
			border-top: 1px solid #f0f0f0;
			line-height: rem(80);
			background-color: #fff;
			li {
				text-align: center;
				flex: 1;
				padding: rem(10) 0;
				p {
					border-right: 1px solid #f0f0f0;
				}
			}
			li:last-child {
				p {
					border-right: 0 none;
				}
			}
			.select {
				color: #fff;
				background-color: #c59c5a;
				p {
					border-right: 0 none;
				}
			}
		}
	}
</style>
複製代碼

參考連接：www.npmjs.com/package/vue…