使用pdf.js获取当前页码的笨办法

1.使用模板(viewer.html)的方式加载pdf文件

页面：<iframe id="pdfBox" frameborder="1" width="1116" height="758"></iframe>

          <input type="hidden" id="hasReadPageNum">

          <input type="hidden" id="totalPageNum">

js：

function initPdf() {

var iframe = $('#pdfBox');

var fileUrl = baseUrl+"/base/downloadFile.do?id="+ fileId;

iframe.attr('src',baseUrl+"/background/static/pdfjs-2.0.943-dist/web/viewer.html?file="+encodeURIComponent(fileUrl) + "#page=1&view=FitH");

}

2.获取当前页面已加载的页码（当前页）

由于是页面中嵌套的iframe，所以获取iframe中的元素有点费劲，所以想办法把iframe里的元素的值传到父级页面，所以可以在viewer.html中加上一个function，用来向父级元素赋值。

<script type="text/javascript">

  //在viewer.js的第10173行调用，将已阅读的行数赋值给父级页面的元素   

  function getReadPageNum(value) {

      //设置已读页码

      window.parent.document.getElementById('hasReadPageNum').value = value;

      //设置总页数

      var totalPage = document.getElementById('numPages').innerText.substring(2);

      window.parent.document.getElementById('totalPageNum').value = totalPage;

   }

</script>

然后在viewer.js的10167行（可能不是这行，可以搜div.setAttribute('data-loaded', true);）处添加上自己的处理逻辑：

//监控已加载的页码

      var currentPageNum = div.getAttribute('data-page-number');

      if(currentPageNum > document.getElementById('readPageNum').value) {

      document.getElementById('readPageNum').value = currentPageNum;

      }

      getReadPageNum(document.getElementById('readPageNum').value);

3.这样在父级页面就能获取hasReadPageNum的值了。

4.当然，感兴趣的可以不使用模板的方式加载pdf，使用pdfjsLib.getDocument(url)的方式加载pdf，这时需要自己处理展示的页面信息，比如添加上各种按钮（上一页，下一页等），感觉这种比较麻烦（可能是我比较low吧......）。可参看官网demo(https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html)

var loadingTask = pdfjsLib.getDocument(baseUrl+"/base/downloadFile.do?id="+ fileId);

loadingTask.promise.then(function(doc) {

console.log(doc.pageNumber)

  var numPages = doc.numPages;

  var lastPromise; // will be used to chain promises

  lastPromise = doc.getMetadata().then(function (data) {

    console.log(JSON.stringify(data.info, null, 2));

    if (data.metadata) {

      console.log(JSON.stringify(data.metadata.getAll(), null, 2));

    }

  });

  var loadPage = function (pageNum) {

    return doc.getPage(pageNum).then(function (page) {

      console.log('# Page ' + pageNum);

      var viewport = page.getViewport({ scale: 1.0, });

      return page.getTextContent().then(function (content) {

        var strings = content.items.map(function (item) {

          return item.str;

        });

      }).then(function () {

        console.log();

      });

    });

  };

  for (var i = 1; i <= numPages; i++) {

    lastPromise = lastPromise.then(loadPage.bind(null, i));

  }

  return lastPromise;

}).then(function () {

  console.log('# End of Document');

}, function (err) {

  console.error('Error: ' + err);

});