pdf的预览 实现放大 缩小 翻页 跳转功能

安装vue-pdf插件

npm install --save vue-pdf或yarn add vue-pdf

引入 pdf 文档地址

html代码：

<!--PDF 预览--><el-dialog title=""class="pdf-dialog-view":modal="false":visible.sync="viewVisible"width="33%" top="39px"center@close='closeDialog'><div ><div class="pdf-preview-arrow fx-row"><div class="icon-scale"><span @click="scaleD"><i class="el-icon-zoom-in"></i></span><span @click="scaleX"><i class="el-icon-zoom-out"></i></span></div><div class="fx-row ml10"><span@click="changePdfPage(0)"class="turn":class="{ grey: currentPage === 1 }"><i class="el-icon-caret-left"></i></span><div>第<el-inputv-model="pageNumber"class="page-number"@input="pageChange"></el-input>页</div><span@click="changePdfPage(1)"class="turn":class="{ grey: currentPage === pageCount }"><i class="el-icon-caret-right"></i></span><span> {{currentPage }} / {{pageCount }} </span></div></div><div class="pdf-content"><pdf:src="src":page="currentPage"@num-pages="pageCount = $event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"ref="pdfWrapper"></pdf></div></div></el-dialog>

js代码：

import pdf from 'vue-pdf';export default {components: {pdf},data() {return {//PDF预览viewVisible: false,src: "/电站工程特性表.pdf",currentPage: 0,pageCount: 0,pageNumber: 1,scale: 1, //放大系数};},methods: {//PDF预览previewPDF(){this.src = pdf.createLoadingTask(this.src);this.viewVisible = true;},//关闭窗口初始化PDF页码closeDialog(){this.viewVisible = false;this.src = "/电站工程特性表.pdf"; },loadPdfHandler () {// 加载的时候先加载第一页this.currentPage = 1;this.pageNumber = 1;},changePdfPage (val) {if (val === 0 && this.currentPage > 1) {this.currentPage--;this.pageNumber = this.currentPage;}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++;this.pageNumber = this.currentPage;}},//跳转页面pageChange() {if (Number(this.pageNumber) > 0 &&Number(this.pageNumber) <= this.pageCount) {this.currentPage = Number(this.pageNumber);} else {this.currentPage = 1;this.pageNumber = 1;}},//放大scaleD() {this.scale += 0.1;this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";this.$refs.pdfWrapper.$el.style.transformOrigin = "top center";},//缩小scaleX() {if (this.scale === 1) {return;}this.scale += -0.1;this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";}}};

css 代码：

<style scoped lang="scss">.pdf-dialog-view{.el-dialog__headerbtn {z-index: 3;top: 10px;.el-dialog__close{color: #4a9ce4;font-size: 22px;}}.el-dialog{margin: auto;bottom: 5vh;}/deep/.el-dialog__header {padding: 0;}/deep/.el-dialog__body {padding: 0!important;background-color: #004594;color: white;}}.pdf-preview-arrow {-moz-user-select: none;user-select: none;position: absolute;right: 60px;top: 8px;z-index: 3;line-height: 30px;.icon-scale,.turn {line-height: 38px;i {font-size: 22px;font-weight: bold;color: #62a6ed;margin: 0 8px;cursor: pointer;}}.page-number {display: inline-block;width: 40px;margin: 0 5px;/deep/.el-input__inner {width: 40px;height: 30px;line-height: 30px;background: rgba(74, 141, 240, 0.14);color: rgba(198, 226, 255, 0.8);border: 1px solid rgba(0, 126, 255, 0.6);padding: 0;text-align: center;}}}.pdf-content {overflow: auto;margin-top: 30px;}</style>

实现效果：

预览文件时可能会出现以下错误

主要原因是：读取PDF文件时，路径不合法，导致读取不到文件； 在vue-cli3脚手架搭建的项目中，读取本地的PDF文件需要放到public文件夹中，在引用时，不能使用相对路径，且‘/’即表示public文件夹(需略去public)；

解决方案1：pdf本地文件需放在public文件夹下，且使用绝对路径

解决方案2：通过后台接口获取文件流，通过blob封装为pdf文件