viewerjs+pdf.js预览pdf文件

前言

开发预览功能，要对各种图片，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源代码

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);
    }
},