前言
開發(fā)預(yù)覽功能，要對各種圖片典予，txt文本城看，word文檔，pdf文檔做預(yù)覽
對于pdf文件的轉(zhuǎn)換可以上傳到后端由后端轉(zhuǎn)換為圖片在返回地址拇涤，也可以直接由前端直接轉(zhuǎn)換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,//這里使用的是嵌入模式捣作，圖片框會嵌入到一定范圍，而不會是生產(chǎn)到body中（全屏）
navbar:navbar,//是否有底部功能欄鹅士，
show: function(){//顯示后
//do something
},
viewed: function(evt){
//do something
},
hidden: function(){
//do something
}
});
如果需要對圖片進(jìn)行一些初始化調(diào)整券躁，在這些鉤子里面寫相應(yīng)方法就行
這些鉤子在全屏與縮小的時候并不執(zhí)行，如果想要執(zhí)行需要修改viewer.js源代碼
我本人修改后的viewer.js文件,主要是針對全屏操作加了鉤子
3.使用Promise來異步加載pdf文件
var srcData=new Promise((resolve, reject)=>{
PDFJS.getDocument(url).then(function (pdfdoc) {
//pdfdoc.numPages;pdf文件的總頁數(shù)
pdfdoc.getPage(1).then(function (page) {
var scale = 2;//縮放倍數(shù) 個人感覺兩倍正好
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數(shù)據(jù) 可直接用于img的src屬性
resolve(canvas.toDataURL("image/png"));
});
});
});
});
4.將獲取的數(shù)據(jù)展示出來
srcData.then((dat)=>{
document.getElementById("images").innerHTML="<li><img src=\'"+dat+"\'></img></li>";
viewer.update();
viewer.view();
});
這樣就做到了預(yù)覽pdf文件的單頁
由于pdf文件可能會過于龐大掉盅，建議單頁預(yù)覽也拜，所以可以將PDFJS中的pdfdoc屬性保存起來，方便獲取其他頁
//x 代表頁數(shù)趾痘，只需要判斷它小于pdfdoc.numPages總頁數(shù)即可
pdfdoc.getPage(x).then(function (page) {
//do something
});
5.替換按鈕
viewer.js里面的前進(jìn)和后退按鈕就并不符合這種異步觀念了慢哈，需要自定義按鈕替換
//css
.prevBtnInstead{
position: absolute;
z-index: 100000;
width: 49px;
height: 32px;
bottom: 0;
left: calc(50% - 24.5px);
display: none;
}
//這里的控制邏輯的vue的 當(dāng)沒有圖片的時候這兩個按鈕不應(yīng)該顯示 顯示異步的時候我沒有顯示預(yù)覽圖，所以地步工具欄是沒有的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);
}
},
