Html canvas绘制PDF的方法

有时候需要在手机上查看pdf，由于手机没有Adobe插件，所有需要将pdf绘制在canvas上。不过这样效果要比用PDF插件查看的效果要差。还是Mark一下实现方法：

第一步

下载所需的JS文件。这里主要是pdf.js和pdf.worker.js。自行去网上下载。并把这两个js文件拷到项目的JS文件夹下。

第二步

jsp代码为：

function showPdf(u) {//绘制pdf函数，参数为文件名
             var container = document.getElementById("container");//找到父
             container.innerHTML = "";  //绘制前先清空父区域
             container.style.display = "block";
             var url = '/upload/Essay/'+u;//链接
             PDFJS.workerSrc = '${pageContext.request.contextPath}/JS/pdf.worker.js';
             PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
            	 p= pdf.numPages;//总页数
            	 addItem(p);
            	 var t=1;
            	 for( var x = 1;x<=p;x++) {
                  pdf.getPage(x).then(function getPageHelloWorld(page) {
                     var scale = 1.2;
                     var viewport = page.getViewport(scale);
                     var canvas = document.getElementById(('canvas'+t).toString());   
                     
                     t++;
                     var context = canvas.getContext('2d');
                     canvas.height = viewport.height;
                     canvas.width = viewport.width;
                     var renderContext = {
                         canvasContext: context,
                         viewport: viewport
                     };
                     page.render(renderContext);     	                              
                 });
                    
             }});
         }
         //添加canvas,根据pdf的页数添加
         function addItem(num) {
             for(var n=1;n<=num;n++){
             var frameDiv=document.createElement("canvas");
             var bodyFa=document.getElementById("container");
             frameDiv.setAttribute("id",'canvas'+n.toString());
             bodyFa.appendChild(frameDiv);
             }
      }
     </script>
      <c:forEach var="essay" items="${currentPageUsers}">
                      <li><a href="javascript:void(0);" onclick="showPdf('${essay.getFileName()}')">${essay.getTitle()}</a></li>
         </c:forEach>

我从后台将essay参数传递给jsp.效果不是很好，有些模糊，如下：