前言
开发预览功能，要对各种图片，txt文本，word文档，pdf文档做预览
对于pdf文件的转换可以上传到后端由后端转换为图片在返回地址，也可以直接由前端直接转换pdf文件查看
1.所需工具
<link rel="stylesheet" type="text/css" href="viewer.min.css" />
<script type="text/javascript" src="viewer.js"></script>
<script type="text/javascript" src="pdf.min.js"></script>
<script type="text/javascript" src="pdf.worker.min.js"></script>
2.声明viewer对象
var viewer=new Viewer(document.getElementById("images"),{
inline: false,//这里使用的是嵌入模式，图片框会嵌入到一定范围，而不会是生产到body中（全屏）
navbar:navbar,//是否有底部功能栏，
show: function(){//显示后
//do something
},
viewed: function(evt){
//do something
},
hidden: function(){
//do something
}
});
如果需要对图片进行一些初始化调整，在这些钩子里面写相应方法就行
这些钩子在全屏与缩小的时候并不执行，如果想要执行需要修改viewer.js源代码
我本人修改后的viewer.js文件,主要是针对全屏操作加了钩子
3.使用Promise来异步加载pdf文件
var srcData=new Promise((resolve, reject)=>{
PDFJS.getDocument(url).then(function (pdfdoc) {
//pdfdoc.numPages;pdf文件的总页数
pdfdoc.getPage(1).then(function (page) {
var scale = 2;//缩放倍数 个人感觉两倍正好
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).then(()=>{
//返回图片的base64数据 可直接用于img的src属性
resolve(canvas.toDataURL("image/png"));
});
});
});
});
4.将获取的数据展示出来
srcData.then((dat)=>{
document.getElementById("images").innerHTML="<li><img src=\'"+dat+"\'></img></li>";
viewer.update();
viewer.view();
});
这样就做到了预览pdf文件的单页
由于pdf文件可能会过于庞大，建议单页预览，所以可以将PDFJS中的pdfdoc属性保存起来，方便获取其他页
//x 代表页数，只需要判断它小于pdfdoc.numPages总页数即可
pdfdoc.getPage(x).then(function (page) {
//do something
});
5.替换按钮
viewer.js里面的前进和后退按钮就并不符合这种异步观念了，需要自定义按钮替换
//css
.prevBtnInstead{
position: absolute;
z-index: 100000;
width: 49px;
height: 32px;
bottom: 0;
left: calc(50% - 24.5px);
display: none;
}
//这里的控制逻辑的vue的 当没有图片的时候这两个按钮不应该显示 显示异步的时候我没有显示预览图，所以地步工具栏是没有的bottom为0
<ul id="bodyImgViewBtn" v-if="viewing.list&&viewing.list.length" class="viewer-toolbar prevBtnInstead" :style="{'bottom':'0px','position':'fixed'}">
<li @click="viewPrev" class="viewer-prev"></li>
<li @click="viewNext" class="viewer-next"></li>
</ul>
//这里省略了一些代码
//具体控制逻辑具体分析 这里就不写完了
function pdfExec(index){
var _this=this;
pdfdoc.getPage(index).then(function (page) {
var scale = 2;
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).then(()=>{
_this.$set(_this.viewing,"img",canvas.toDataURL("image/png"));
_this.$set(_this.viewing,"index",index);
setTimeout(function(){
viewer.update();
},100);
});
});
}
viewPrev:function(){
var nowFile=this.viewing;
var index=(nowFile.index-1)>=1?(nowFile.index-1):nowFile.length;
if(index!=nowFile.index){
this.pdfPageget(index);
}
},
