<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文件

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);  });