话不多说，上代码~
1.页面：
<template><el-dialog:title="title":visible.sync="openViewPdf"width="1000px":before-close="close"append-to-body:close-on-click-modal="false":close-on-press-escape="false":destroy-on-close="true"><div class="global"><div class="preview"><el-button type="success" @click="click">开始预览</el-button></div><div class="pdfContainer" v-if="isShow"><div class="button"><el-button type="success" @click="prev()">上一页</el-button><el-button type="success" @click="next()">下一页</el-button><el-button type="success" @click="scaleD()">放大</el-button><el-button type="success" @click="scaleX()">缩小</el-button><el-button type="success" @click="clockwise()">顺时针</el-button><el-button type="success" @click="antiClockwise()">逆时针</el-button><el-button type="success" @click="print()">打印</el-button></div><div class="pdf"><pdfref="pdf":src="src":page="currentPage":rotate="pageRotate"@num-pages="pageCount = $event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"></pdf></div><div class="page"><span class="pageNum">{{ currentPage }}</span><span class="pageNum">/</span><span class="pageNum">{{ pageCount }}</span></div></div></div></el-dialog></template>
2.js相关代码
click() {this.isShow= trueconst name = this.file.name.substr(0, this.file.name.lastIndexOf('.'))// http://10.20.61.94:81/dev-api/seal/batchStamp/download?filePath=/ofd/0509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd&remotePath=N/A&fileName=0const baseURL = process.env.VUE_APP_BASE_APIconst baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI(this.file.fileSignPath) + '&remotePath=' + 'N/A' + '&fileName=' + name//const baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI('/ofd/0509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd') + '&remotePath=' + 'N/A' + '&fileName=' + '0'var xhr = new XMLHttpRequest()xhr.open('get', baseUrl, true) // get、post都可xhr.responseType = 'blob' // 转换流xhr.setRequestHeader('Authorization', 'Bearer ' + getToken()) // token键值对let that = thisxhr.onload = function() {if (this.status == 200) {var blob = this.responsethat.src = window.URL.createObjectURL(blob)// const binaryData = [];// binaryData.push(this.response);// let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));// that.src = url}}xhr.send()},// pdf加载时loadPdfHandler(e) {this.currentPage = 1; // 加载的时候先加载第一页this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},// 上一页prev() {if (this.currentPage > 1) {this.currentPage--;}},// 下一页next() {if (this.currentPage < this.pageCount) {this.currentPage++;}},//放大scaleD() {if(this.scale == 100) return this.$message.warning('已经是最大喽~~')this.scale += 10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},//缩小scaleX() {if(this.scale == 40) return this.$message.warning('已经是最小喽~~')this.scale += -10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},// 顺时针clockwise() {this.pageRotate += 90;},// 逆时针antiClockwise() {this.pageRotate -= 90;},print() {this.$refs.pdf.print()},
注意啦：如果想预览带电子签章的pdf，还需改一些代码：
1.找到node_modules/pdfjs-dist/build/pdf.worker.js注释一行代码
2.找到node_modules/pdfjs-dist/es5/pdf.worker.js注释一行代码
注意，注意！！！
预览pdf时，总会遇到pdf中的中文无法显示的问题，多见于票据、合同之类的pdf,如何解决这个问题，以下为解决办法：
1.复制cmap文件到/static，直接引用。
this.url= pdf.createLoadingTask({ url: 'http://localhost/11.pdf',cMapUrl: '../../../../static/cmaps/', cMapPacked: true})
cmap的路径为：node_modules\vue-pdf\node_modules\pdfjs-dist\cmaps
但是这种方式我貌似没试成功，或许还是因为我的pdfjs-dist的版本问题
2.访问固定的cMap地址
但是这样，如果内网环境下是无法访问的，访问这个官网，也没提供下载功能，所以我觉得可以按照这个版本，下载对应的pdfjs-dist,然后再引入对应的cMap，或许就可以啦
ps:为了避免高版本语法的不兼容性，可以使用无草案版本的pdfjs-dist：2.0.943
