感谢大佬写的插件vue-pdf。我整理啦一下我遇到的问题。

vue项目中要用到pdf预览，于是开始百度找，也许是缘分找到啦vue-pdf插件
第一步肯定是安装插件

npm install --save vue-pdf

第二步创建一个公共组件
用来点击放大用的，有需要可以使用，没需要可以忽略这一步。
this.$refs.referencePdf.open(文件的地址，文件的主键)

<template>
<div class="workfloeStyle">
<el-dialog title="PDF文件预览" :visible.sync="dialogTableVisible" width="70%" center style="margin-bottom:3vh">
<el-row :gutter="20">
<el-col :span="6" :offset="1">
<el-button type="text" @click="fileDownload">下载文件</el-button>
<el-button type="text" @click.stop="clock">顺时针旋转</el-button>
<el-button type="text" @click.stop="counterClock">逆时针旋转</el-button>
</el-col>
</el-row>
<div v-show="fileType === 'pdf'">
<pdf
:src="src"
height="300px"
:page="currentPage"
:rotate="pageRotate"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler"
/>
</div>
<span slot="footer" class="dialog-footer">
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="3"><el-button type="text" @click="changePdfPage(0)">上一页</el-button></el-col>
<el-col :span="3"><el-button type="text" disabled style="color:black">{{ currentPage }} / {{ pageCount }}</el-button></el-col>
<el-col :span="3"><el-button type="text" @click="changePdfPage(1)">下一页</el-button></el-col>
</el-row>
</span>
</el-dialog>
</div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
dialogTableVisible: false,
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: 'pdf', // 文件类型
pageRotate: 0,
fileID: '',
src: '' // pdf文件地址
}
},
mounted() {
},
methods: {
open(url, fileID) {
this.dialogTableVisible = true
this.src = url
this.fileID = fileID
this.loadPdfHandler()
},
fileDownload() {
location.href = `nifa-autonomy-file/upload/download/${this.fileID}`
},
changePdfPage(val) {
if (val === 0 && this.currentPage > 1) {
this.currentPage--
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
}
},
clock() {
this.pageRotate += 90
},
counterClock() {
this.pageRotate -= 90
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1 // 加载的时候先加载第一页
this.pageRotate = 0
}
}
}
</script>

<style lang="scss">
</style>

第三步在父组件中引用

import pdf from 'vue-pdf'
components: { pdf }
<pdf
v-if="testmsgY==='pdf'"
:src="urlY" //后台返回的地址
:page="1"
/>

到这里就ok啦，但是突然发现，有问题，比如显示不全，比如有的pdf打开是横向的，需要旋转，但是第一次点击旋转没有效果。所以更换啦下面这个文件
打开node包
找到pdfjsWrapper.js

复制代码，覆盖源码

import { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service';

var pendingOperation = Promise.resolve();

export default function(PDFJS) {

function isPDFDocumentLoadingTask(obj) {

return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
}

function createLoadingTask(src, options) {
let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
var source;
if ( typeof(src) === 'string' )
source = { url: src };
else if ( src instanceof Uint8Array )
source = { data: src };
else if ( typeof(src) === 'object' && src !== null )
source = Object.assign({}, src);
else
throw new TypeError('invalid src type');

// source.verbosity = PDFJS.VerbosityLevel.INFOS;
// source.pdfBug = true;
// source.stopAtErrors = true;
source.cMapUrl=CMAP_URL,
source.cMapPacked=true
var loadingTask = PDFJS.getDocument(source);
loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public

if ( options && options.onPassword )
loadingTask.onPassword = options.onPassword;

if ( options && options.onProgress )
loadingTask.onProgress = options.onProgress;

return loadingTask;
}

function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {

var pdfDoc = null;
var pdfPage = null;
var pdfRender = null;
var canceling = false;

canvasElt.getContext('2d').save();

function clearCanvas() {

canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
}

function clearAnnotations() {

while ( annotationLayerElt.firstChild )
annotationLayerElt.removeChild(annotationLayerElt.firstChild);
}

this.destroy = function() {

if ( pdfDoc === null )
return;

// Aborts all network requests and destroys worker.
pendingOperation = pdfDoc.destroy();
pdfDoc = null;
}

this.getResolutionScale = function() {

return canvasElt.offsetWidth / canvasElt.width;
}

this.printPage = function(dpi, pageNumberOnly) {

if ( pdfPage === null )
return;

// 1in == 72pt
// 1in == 96px
var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
var CSS_UNITS = 96.0 / 72.0;

var iframeElt = document.createElement('iframe');

// function removePrintContainer() {

// 	iframeElt.parentNode.removeChild(iframeElt);
// }
function removePrintContainer() {
printContainerElement.parentNode.removeChild(printContainerElement);
}

new Promise(function(resolve, reject) {

iframeElt.frameBorder = '0';
iframeElt.scrolling = 'no';
iframeElt.width = '0px;'
iframeElt.height = '0px;'
iframeElt.style.cssText = 'position: absolute; top: 0; left: 0';

iframeElt.onload = function() {

resolve(this.contentWindow);
}

window.document.body.appendChild(iframeElt);
})
.then(function(win) {

win.document.title = '';

return pdfDoc.getPage(1)
.then(function(page) {

var viewport = page.getViewport({ scale: 1 });
win.document.head.appendChild(win.document.createElement('style')).textContent =
'@supports ((size:A4) and (size:1pt 1pt)) {' +
'@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
'}' +

'@media print {' +
'body { margin: 0 }' +
'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
'}'+

'@media screen {' +
'body { margin: 0 }' +
'}'+

''
return win;
})
})
.then(function(win) {

var allPages = [];

for ( var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber ) {

if ( pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1 )
continue;

allPages.push(
pdfDoc.getPage(pageNumber)
.then(function(page) {

var viewport = page.getViewport({ scale: 1 });

var printCanvasElt = win.document.body.appendChild(win.document.createElement('canvas'));
printCanvasElt.width = (viewport.width * PRINT_UNITS);
printCanvasElt.height = (viewport.height * PRINT_UNITS);
return page.render({
canvasContext: printCanvasElt.getContext('2d'),
transform: [ // Additional transform, applied just before viewport transform.
PRINT_UNITS, 0, 0,
PRINT_UNITS, 0, 0
],
viewport: viewport,
intent: 'print'
}).promise;
})
);
}

Promise.all(allPages)
.then(function() {

win.focus(); // Required for IE
if (win.document.queryCommandSupported('print')) {
win.document.execCommand('print', false, null);
} else {
win.print();
}
removePrintContainer();
})
.catch(function(err) {

removePrintContainer();
emitEvent('error', err);
})
})
}

this.renderPage = function(rotate) {
if ( pdfRender !== null ) {

if ( canceling )
return;
canceling = true;
pdfRender.cancel();
return;
}

if ( pdfPage === null )
return;
// rotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);
rotate = rotate === undefined ? 0 : rotate
var scale = canvasElt.offsetWidth / pdfPage.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);
var viewport = pdfPage.getViewport({ scale:scale, rotation:rotate });

emitEvent('page-size', viewport.width, viewport.height);

canvasElt.width = viewport.width;
canvasElt.height = viewport.height;
pdfRender = pdfPage.render({
canvasContext: canvasElt.getContext('2d'),
viewport: viewport
});

annotationLayerElt.style.visibility = 'hidden';
clearAnnotations();

var viewer = {
scrollPageIntoView: function(params) {
emitEvent('link-clicked', params.pageNumber)
},
};

var linkService = new PDFLinkService();
linkService.setDocument(pdfDoc);
linkService.setViewer(viewer);

pendingOperation = pendingOperation.then(function() {

var getAnnotationsOperation =
pdfPage.getAnnotations({ intent: 'display' })
.then(function(annotations) {

PDFJS.AnnotationLayer.render({
viewport: viewport.clone({ dontFlip: true }),
div: annotationLayerElt,
annotations: annotations,
page: pdfPage,
linkService: linkService,
renderInteractiveForms: false
});
});

var pdfRenderOperation =
pdfRender.promise
.then(function() {

annotationLayerElt.style.visibility = '';
canceling = false;
pdfRender = null;
})
.catch(function(err) {

pdfRender = null;
if ( err instanceof PDFJS.RenderingCancelledException ) {

canceling = false;
this.renderPage(rotate);
return;
}
emitEvent('error', err);
}.bind(this))

return Promise.all([getAnnotationsOperation, pdfRenderOperation]);
}.bind(this));
}

this.forEachPage = function(pageCallback) {

var numPages = pdfDoc.numPages;

(function next(pageNum) {

pdfDoc.getPage(pageNum)
.then(pageCallback)
.then(function() {

if ( ++pageNum <= numPages )
next(pageNum);
})
})(1);
}

this.loadPage = function(pageNumber, rotate) {
pdfPage = null;
if ( pdfDoc === null )
return;
pendingOperation = pendingOperation.then(function() {
return pdfDoc.getPage(pageNumber);
})
.then(function(page) {
pdfPage = page;
this.renderPage(rotate);
emitEvent('page-loaded', page.pageNumber);
}.bind(this))
.catch(function(err) {

clearCanvas();
clearAnnotations();
emitEvent('error', err);
});
}

this.loadDocument = function(src) {

pdfDoc = null;
pdfPage = null;

emitEvent('num-pages', undefined);

if ( !src ) {

canvasElt.removeAttribute('width');
canvasElt.removeAttribute('height');
clearAnnotations();
return;
}

// wait for pending operation ends
pendingOperation = pendingOperation.then(function() {

var loadingTask;
if ( isPDFDocumentLoadingTask(src) ) {

if ( src.destroyed ) {

emitEvent('error', new Error('loadingTask has been destroyed'));
return
}

loadingTask = src;
} else {

loadingTask = createLoadingTask(src, {
onPassword: function(updatePassword, reason) {

var reasonStr;
switch (reason) {
case PDFJS.PasswordResponses.NEED_PASSWORD:
reasonStr = 'NEED_PASSWORD';
break;
case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
reasonStr = 'INCORRECT_PASSWORD';
break;
}
emitEvent('password', updatePassword, reasonStr);
},
onProgress: function(status) {

var ratio = status.loaded / status.total;
emitEvent('progress', Math.min(ratio, 1));
}
});
}

return loadingTask.promise;
})
.then(function(pdf) {

pdfDoc = pdf;
emitEvent('num-pages', pdf.numPages);
emitEvent('loaded');
})
.catch(function(err) {

clearCanvas();
clearAnnotations();
emitEvent('error', err);
})
}

annotationLayerElt.style.transformOrigin = '0 0';
}

return {
createLoadingTask: createLoadingTask,
PDFJSWrapper: PDFJSWrapper,
}
}

搞定。。。