项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己起了解了一下，最后决定用pdf.js，
但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！
其实 这和前端框架无关的，直接使用pdf.js原生
搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生
的是最好的啦！
首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意放在static文件目录下，
这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟，我不是图方便嘛。目录结构放一下
其实就可以直接用的，网上很多，viewer.js 里的 
用这种方式必不可少的是跨域问题，你存储文件的服务器路径会和项目产生跨域，我的解决办法是，让后台返回流的形式返回文件，后台代码案例：
注意：
1 pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误。 所以我们得改变一下源码
2 file参数中默认只允许传简单路径比如：http://www.a.com/file.php. 如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错， 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数
这告诉我们 url必须进行encode编码 把参数file后传入的动态参数中特殊字符转义：
这里又会有两种方法：
encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件
发现 encodeURI不会对:/?&等uri中起分割作用的字符进行编码；
encodeURIComponent则会。
所以必须选择 encodeURIComponent 进行对url的编码
举例：
这样如此就ok了
3
如果 后台返回给前台的流的url形式 是
https://uat.hjl.hscf.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb
这样pdf.js插件是无法识别的，所以的在最后加上 &.pdf 来骗过插件
效果图
上面是pc端的，移动端也同样试用
根据以上在实现在项目中
组件代码
<template>
<div class="cpdf">
<div class="center">
<div class="contor">
</div>
<canvas v-for="data in canvasData" :key="data" class="canvasstyle" :id="'the-canvas-'+data"></canvas>
</div>
<div class="page-foot">
<Page :current="page_num" :total="PageCount" @on-change="orientation" simple style="display: inline-block;"></Page>
<div class="foot-button">
<Button @click="addscale" icon="plus" size="small" style="margin-right:20px;" title="放大"></Button>
<Button @click="minus" icon="minus" size="small" title="缩小"></Button>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { Button, Page, Affix } from "iView";
import PDFJS from "../../../static/PDF/pdf.js";
export default {
name: "CPdf",
props: ["pdfurl"],
components: {
Button: Button,
Page: Page,
Affix: Affix
},
data() {
return {
pdfDoc: null, //pdfjs 生成的对象
pageNum: 1, //
pageRendering: false,
pageNumPending: null,
scale: 1.2, //放大倍数
page_num: 0, //当前页数
page_count: 0, //总页数
maxscale: 2, //最大放大倍数
minscale: 0.8, //最小放大倍数
canvasData: []
};
},
methods: {
renderPage(num) {
//渲染pdf
let vm = this;
this.pageRendering = true;
let canvas = document.getElementById("the-canvas-" + num);
// Using promise to fetch the page
this.pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(vm.scale);
//alert(vm.canvas.height)
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
// canvasContext: vm.ctx,
canvasContext: canvas.getContext("2d"),
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
vm.pageRendering = false;
if (vm.pageNumPending !== null) {
// New page rendering is pending
vm.renderPage(vm.pageNumPending);
vm.pageNumPending = null;
}
});
});
vm.page_num = vm.pageNum;
},
addscale() {
//放大
if (this.scale >= this.maxscale) {
return;
}
this.scale += 0.1;
for (var i = 1; i < this.canvasData.length + 1; i++) {
this.queueRenderPage(i);
}
},
minus() {
//缩小
if (this.scale <= this.minscale) {
return;
}
this.scale -= 0.1;
for (var i = 1; i < this.canvasData.length + 1; i++) {
this.queueRenderPage(i);
}
},
queueRenderPage(num) {
this.renderPage(num);
},
orientation(events) {
// 用 class="canvasstyle" 添加锚点
let _index = events;
// console.log(_index);
let jump = document.querySelectorAll(".canvasstyle");
// console.log(jump);
// 获取需要滚动的距离
let total = 92;
for (let index = 0; index < _index; index++) {
if (index > 0) {
total += jump[index].clientHeight + 5;
}
}
let distance =
document.documentElement.scrollTop || document.body.scrollTop;
// 平滑滚动，时长500ms，每10ms一跳，共50跳
let step = total / 50;
if (total > distance) {
smoothDown();
} else {
let newTotal = distance - total;
step = newTotal / 50;
smoothUp();
}
function smoothDown() {
if (distance < total) {
distance += step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothDown, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
function smoothUp() {
if (distance > total) {
distance -= step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothUp, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
}
},
computed: {
ctx() {
let id = document.getElementById("the-canvas");
return id.getContext("2d");
},
PageCount() {
return this.page_count * 10;
}
},
mounted() {
let vm = this;
vm.canvasData = [];
// PDFJS.workerSrc = "../../../static/PDF/build/pdf.worker.js";
PDFJS.getDocument(vm.pdfurl)
.then(function(pdfDoc_) {
//初始化pdf
vm.pdfDoc = pdfDoc_;
vm.page_count = vm.pdfDoc.numPages;
for (var i = 0; i < vm.page_count; i++) {
vm.canvasData.push(i + 1);
}
return pdfDoc_;
})
.then(function(pdfDoc_) {
//初始化pdf
vm.pdfDoc = pdfDoc_;
vm.page_count = vm.pdfDoc.numPages;
for (var i = 0; i < vm.page_count; i++) {
vm.renderPage(i + 1);
}
});
}
};
</script>
<style lang="scss" scoped type="text/css">
.cpdf {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
.center {
text-align: center;
height: 100%;
overflow: auto;
padding-top: 20px;
.contor {
margin-bottom: 10px;
}
}
.page-foot {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 56px;
line-height: 56px;
background-color: #fff;
text-align: center;
z-index: 10;
.foot-button {
display: inline-block;
height: 56px;
position: relative;
top: -22px;
left: 20px;
}
}
}
</style>