现流行的浏览器都有内置插件可以打开PDF文件，很方便，但缺点是对程序员来说，不可操纵。所以给大家推荐一个开源插件——PDF.js（基于html5，纯JS实现）

　　官网里有Github项目源码和DEMO http://mozilla.github.io/pdf.js/

　　这个插件可以绘制两部分内容——canvas 和 文本层（由一堆div组成，div内部包含pdf内的文本，这些文本是透明的，覆盖到canvas上边，还可被选中，基于这一点，可以做pdf文内搜索功能，官方的demo已经实现）

　　官方的DEMO比较复杂，当然可以直接使用iframe，以下代码直接粘到html文件中，用浏览器打开即可查看效果。

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8"/>
<style>
   iframe{
    width:800px;
    height:600px;
};
</style>
</head>

<body>
    <iframe src="http://mozilla.github.io/pdf.js/web/viewer.html?file=http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" >  
</iframe> 
 
</body>

如果觉得这种方式可取，直接从Github下载release版本 https://github.com/mozilla/pdf.js/releases，更方便修改和使用

 

　　如果想做的轻巧一点，则只需要pdf.js和pdf.worker.js两个文件。具体用法很简单，PDF.js这个插件高度依赖promise，不了解的请移步

　　　　　　https://www.cnblogs.com/lvdabao/p/es6-promise-1.html

这个例子有一个缩放功能，同样，以下代码粘到html文件中可直接运行

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8"/>
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
<!-- 这是PDF.js的核心插件，以下可以通过一下URL直接下载 -->
<script src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="http://mozilla.github.io/pdf.js/build/pdf.worker.js"></script>

<style>

</style>
<script>

//PDF.js插件定义的对象，给定pdf文件的URL或者一个Uint8Array数组，调用PDFJS.getDocument()可以获取
var pdfDoc = null;
//缩放比例
var scale = 1.5;
//pdf文件的总页数
var count = 1;

$(document).ready(function() {
  
  var url = "http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
  PDFJS.getDocument(url).then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;

    count = pdfDoc.numPages;
    
    //绘制所有的页面
    renderAll();
    });
  
});

function renderAll(){
  for(var curPage=1;curPage<=count;curPage++){
    //新建一个<canvas>用于，并将对应页面的内容绘制到这个canvas上
    var canvas = document.createElement("canvas");
    var div = document.createElement("div");
    $(div).attr("id","page"+curPage);
    $(div).attr("class","page");
    $(div).append(canvas);
    $("#pdfContainer").append(div);
    renderPage(curPage,canvas);
  }
}

function renderPage(num,canvas) {
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var ctx = canvas.getContext('2d');
    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() {
        //这是每次绘制一页内容之后的回调函数
        console.log("Page"+num+" rendered");
    }); 
  });
}

function zoomOut(){
  scale+=0.4;
  $("#pdfContainer").empty();
  renderAll();
}

function zoomIn(){
  scale-=0.4;
  $("#pdfContainer").empty();
  renderAll();
}

</script>
<title>PDFJS_DEMO</title>
</head>
<body>
<div>
<button onclick="zoomOut()">放大</button>
<button onclick="zoomIn()">缩小</button>
</div>
<div id="pdfContainer"></div>
</body>
</html>

这个例子的缺点就是，没有文本层。网上看过一些例子，因为这个插件的版本太多，用法也发生了变化，最终没有做出来。有兴趣的可以参考

http://vivin.net/2013/06/06/rendering-a-pdf-with-text-selection-using-pdf-js/ 

 

https://www.sitepoint.com/custom-pdf-rendering/?utm_source=javascriptweekly&utm_medium=email