PDF在线预览

1、前端需要引入pdf.js、pdf.worker.js

    /**
     * 预览pdf文件
     * pop 用于显示pdf文件的jquery对象
     * workerSrc pdf.worker.js相对于调用showPdf方法文件的路径
     * 如：../../../lib/pdf/pdf.worker.js
     * data pdf的base64数据
     */
    pageNS.showPdf = function(pop,data,workerSrc) {
        debugger;
        $(pop).empty();
        var url = convertDataURIToBinary(data);
        PDFJS.workerSrc = workerSrc;
        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf){
             pages = pdf.numPages;
             for(var i = 1; i <= pdf.numPages; i++){
                 var id = 'page-id-' + i;
                 $(pop).append('<canvas id="' + id + '"></canvas>');
                 showAll(url,i,id);
             }
         });
    }
    
    var showAll = function(url,page,id){
        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf){
            pdf.getPage(page).then(function getPageHelloWorld(page){
                var scale = 1;
                var viewport = page.getViewport(scale);
                var canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                var renderContext = {
                    canvasContext:context,
                    viewport:viewport
                };
                page.render(renderContext);
            });
        });
    };
    
    var convertDataURIToBinary = function(dataURI) { //将encodeBase64解码
        dataURI = dataURI.replace(/[\r\n]/g,'');
        var raw = window.atob(dataURI);
        var rawLength = raw.length;
        //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
        var array = new Uint8Array(new ArrayBuffer(rawLength));  
        for(i = 0; i < rawLength; i++) {
          array[i] = raw.charCodeAt(i)&0xff;
        }
        return array;
     };
2、后端从ftp上获取PDF文件并将其转换成base64数据传给前台