pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。
在线演示地址：/pdf.js/web/viewer.html
PDF.js可在官网下载 地址：http://mozilla.github.io/pdf.js/
解压后得到的build目录就是PDF.js的核心文件，直接引入里面的pdf.js文件就可以使用。
html 代码示例：
<div class="pdf-view"><h1>练习</h1><canvas id="the-canvas"></canvas> <div class="page"> <button id="prev">上一页</button> <span>页数: <span id="page_num"></span> / <span id="page_count"></span></span> <button id="next">下一页</button> </div> </div>
<script src="../../bulid/pdf.js"></script> //引入pdf.js文件
pdf的预览就是通过上面的canvas展现出来的，一般移动端页面都将用户缩放禁止了，但如果在移动端页面上显示有点模糊的话，可以允许用户缩放，而宽高大小等样式根据项目要求调整吧。
JS代码示例：
var url = './练习.pdf'; //pdf文件的地址PDFJS.workerSrc = '../../build/pdf.worker.js'; //引入主要文件var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 0.8, canvas = document.getElementById('the-canvas'), ctx = canvas.getContext('2d'); function renderPage(num) { pageRendering = true; pdfDoc.getPage(num).then(function(page) { var viewport = page.getViewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: ctx, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.promise.then(function() { pageRendering = false; if (pageNumPending !== null) { // New page rendering is pending renderPage(pageNumPending); pageNumPending = null; } }); }); document.getElementById('page_num').textContent = pageNum; } function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } function onPrevPage() { if (pageNum <= 1) { return; } pageNum--; queueRenderPage(pageNum); } document.getElementById('prev').addEventListener('click', onPrevPage); function onNextPage() { if (pageNum >= pdfDoc.numPages) { return; } pageNum++; queueRenderPage(pageNum); } document.getElementById('next').addEventListener('click', onNextPage); PDFJS.getDocument(url).then(function(pdfDoc_) { pdfDoc = pdfDoc_; document.getElementById('page_count').textContent = pdfDoc.numPages; renderPage(pageNum); });
参考：/li_cheng_liang/article/details/75332938
