Pdf preview achieved by pdf.js

1. Download

pdf.js download, after downloading the directory structure shown in FIG decompression:

2. Import project

The author is directly placed in the project file.

3. Call

Scenes:

 $(".PDF").on('click','.lookpdf', function() {
           var index = layer.msg('正在转存pdf，请稍候',{icon: 16,time:false,shade:0.8});
            var data= this.dataset.pdf;
            $.get("../../toPDF",{url:data},function(res){
                if(res.state=='ok'){
                    layer.close(index);
                    window.open("../../js/PDF.js/web/viewer.html?file=../../../"+res.msg,'PDF','width:50%;height:50%;top:100;left:100;');
                }else{
                    layer.close(index);
                   layer.msg("查阅失败");
                }
            })

          })

Call pdf.js statement:

    window.open("../../js/PDF.js/web/viewer.html?file=../../../"+res.msg,'PDF','width:50%;height:50%;top:100;left:100;');

Background data is returned as a pdf file name, a relative path here take the form of a file path written in the form of pop page.

Further, the current path of the file may be changed by writing mode pdf.js default configuration file path.

var DEFAULT_URL = ''; // 将默认PDF路径改为你需要的路径

4. Effects

Comment: Here the print function through css, download, copy text to a specific page features hidden, to achieve project requirements.

Modify the file viewer.html file

<style>
    #openFile {
      visibility: hidden;
    }
    #download {
      visibility: hidden;
    }
    #viewBookmark{
      visibility: hidden;
    }
</style>

Save Print js achieve a ban by the right mouse button

  // 禁止鼠标右键保存打印
	document.oncontextmenu = function(ev){
		return false;
	};