H5+pdfJS的实现

H5页面上传PDF文档时候可以使用pdfJS插件，这里以笔记形式记录H5引入pdfJS的步骤。

一、下载pdfJS插件；

官网网址：http://mozilla.github.io/pdf.js/getting_started/#download

下载解压后的结构：

其中build中pdf.js和pdf.worker.js文件。

二、html文件

    
    
    
    


PDF.js Previous/Next example

     

    Save


    Previous
    Next
    Page:  / 

三、js文件：

//引入pdf.js之后
var url = 'web/09.pdf';
//加载核心文件
PDFJS.workerSrc = 'build/pdf.worker.js';
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//

if(window.File && window.FileList && window.FileReader && window.Blob) {
    document.getElementById('upload').addEventListener('change', selectedFile, false);
} else {
    document.write('您的浏览器不支持File Api');
}

PDFJS.disableWorker = true;

var pdfDoc = null,
    pageNum = 1,
    scale = 1,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        page.render(renderContext);
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
    document.getElementById('page_count').textContent = pdfDoc.numPages;
}

//
// Go to previous page
//
function goPrevious() {
    if (pageNum <= 1)
        return;
    pageNum--;
    renderPage(pageNum);
}

//
// Go to next page
//
function goNext() {
    if (pageNum >= pdfDoc.numPages)
        return;
    pageNum++;
    renderPage(pageNum);
}

//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
    pdfDoc = _pdfDoc;
    renderPage(pageNum);
});


//文件选择
function selectedFile(event) {
    //将本地pdf变成数据流
    event = event || window.event;
    var oFile = event.target.files[0];
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(oFile);
        //监听文件读取结束后事件
        reader.onloadend = function (e) { 
            url = e.target.result;
        }; 
    }

}


function savePdf(){
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
        pdfDoc = _pdfDoc;
        renderPage(pageNum);
    });
}

四、运行结果：

但是运行结果中pdf需要上下翻页，达不到加载全部，页面滚动条浏览的效果，进行如下修改

一、html页面：

    
    
    
    
    


全部显示
 

     

    Save

二、JS页面

var url = 'web/09.pdf';

//文件选择
function selectedFile(event) {
    //将本地pdf变成数据流
    event = event || window.event;
    var oFile = event.target.files[0];
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(oFile);
        //监听文件读取结束后事件
        reader.onloadend = function (e) {
            // $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址 
            url = e.target.result;
        };
    }

}



function createPdfContainer(id,className) {
    var pdfContainer = document.getElementById('pdf-container');
    var canvasNew =document.createElement('canvas');
    canvasNew.id = id;
    canvasNew.className = className;
    var br =document.createElement('br');  //添加上br元素，防止页面变大时候pdf并排显示
    pdfContainer.appendChild(br);
    pdfContainer.appendChild(canvasNew);
};

//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf,i,id) {
    pdf.getPage(i).then(function(page) {

        var scale = 0.5;   //pdf大的放大倍数
        var viewport = page.getViewport(scale);

        //
        //  准备用于渲染的 canvas 元素
        //

        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        //
        // 将 PDF 页面渲染到 canvas 上下文中
        //
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
};
//创建和pdf页数等同的canvas数
function createSeriesCanvas(num,template) {
    var id = '';
    for(var j = 1; j <= num; j++){
        id = template + j;
        createPdfContainer(id,'pdfClass');
    }
}
//读取pdf文件，并加载到页面中
function loadPDF(fileURL) {
    //清除所有元素 
    var pdfContainer = document.getElementById('pdf-container');
    var childs = pdfContainer.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
        pdfContainer.removeChild(childs[i]);
    }
    // pdfContainer.clear;
    PDFJS.getDocument(fileURL).then(function(pdf) {
        //用 promise 获取页面
        var id = '';
        var idTemplate = 'cw-pdf-';
        var pageNum = pdf.numPages;
        console.log("页码："+pageNum)
        //根据页码创建画布
        createSeriesCanvas(pageNum,idTemplate);
        //将pdf渲染到画布上去
        for (var i = 1; i <= pageNum; i++) {
            id = idTemplate + i;
            renderPDF(pdf,i,id);
        }

    });
}

function savePdf(){ 
    loadPDF(url);
}

function fsubmit() {
    var form=document.getElementById("form1");
    var fd =new FormData(form); 
    $.ajax({
        url: "server.php",
        type: "POST",
        data: fd,
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
        success: function(response,status,xhr){
            console.log(xhr);
            var json=$.parseJSON(response);
            var result = '';
            result +="个人信息：
name:"+json['name']+"
gender:"+json['gender']+"
number:"+json['number'];
            result += '
头像：';
            $('#result').html(result);
        }
    });
    return false;
}

三、运行结果：