php html5预览pdf文件,html页面中展示pdf文件

由于最近安卓app开发中遇到WebView不支持pdf文件的预览，所以在h5页面中使用pdf.js来实现预览。

以下代码可以直接在服务器端运行，查看效果(需要注意一下几点)

下载jquery.min.js文件

下载pdf.js文件

下载pdf.worker.js(demo.html页面无需引入，因为在pdf.js文件中已经引入了)

任意pdf文件(比如demo中的1212.pdf),js代码中的url就是需要预览的pdf地址，可以是本地pdf文件，可以是在线的，也可以是pdf文件流

demo.html页面必须放在服务器端才能预览pdf

pdf.js默认不显示电子签章(数字签名)，解决办法：在pdf.worker.js中找到如下代码并注释掉

pdf.js旧版本

if (this.data.fieldType === 'Sig') {

warn('unimplemented annotation type: Widget signature');

return false;

}

pdf.js新版本v1.10.88

if (data.fieldType === 'Sig') {

_this2.setFlags(_util.AnnotationFlag.HIDDEN);

}

demo.html文件如下：

pdf预览

.close-pdf{position:fixed; top:20px; right:20px; color:#1d69b3; }

button{width:40px; border:none; background: none; color:#1d69b3; font-size: 20px; outline: none;}

.control{

position: fixed;

bottom: 20px;

left: 50%;

margin-left: -140px;

}

.control span{color:#1d69b3; font-size: 16px; line-height: 30px;}

/

var url = '1212.pdf'

var pdfDoc = null,

pageNum = 1,

pageRendering = false,

pageNumPending = null,

scale = 2.5, //调节预览文件的清晰度

canvas = document.getElementById('the-canvas'),

ctx = canvas.getContext('2d');

/**

* Get page info from document, resize canvas accordingly, and render page.

* @param num Page number.

*/

function renderPage(num) {

pageRendering = true;

// 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

};

var renderTask = page.render(renderContext);

// Wait for rendering to finish

renderTask.promise.then(function() {

pageRendering = false;

if (pageNumPending !== null) {

// New page rendering is pending

renderPage(pageNumPending);

pageNumPending = null;

}

});

});

// Update page counters

document.getElementById('page_num').textContent = num;

}

/**

* If another page rendering in progress, waits until the rendering is

* finised. Otherwise, executes rendering immediately.

*/

function queueRenderPage(num) {

if (pageRendering) {

pageNumPending = num;

} else {

renderPage(num);

}

}

/**

* Displays previous page.

*/

function onPrevPage() {

if (pageNum <= 1) {

return;

}

pageNum--;

queueRenderPage(pageNum);

}

document.getElementById('prev').addEventListener('click', onPrevPage);

/**

* Displays next page.

*/

function onNextPage() {

if (pageNum >= pdfDoc.numPages) {

return;

}

pageNum++;

queueRenderPage(pageNum);

}

document.getElementById('next').addEventListener('click', onNextPage);

/**

* Displays first page.

*/

function onFirstPage() {

if (pageNum <= 1) {

return;

}

pageNum=1;

queueRenderPage(pageNum);

}

document.getElementById('first').addEventListener('click', onFirstPage);

/**

* Displays final page.

*/

function onFinalPage() {

if (pageNum >= pdfDoc.numPages) {

return;

}

pageNum=pdfDoc.numPages;

queueRenderPage(pageNum);

}

document.getElementById('final').addEventListener('click', onFinalPage);

/**

* Asynchronously downloads PDF.

*/

PDFJS.getDocument(url).then(function(pdfDoc_) {

pdfDoc = pdfDoc_;

document.getElementById('page_count').textContent = pdfDoc.numPages;

// Initial/first page rendering

renderPage(pageNum);

});