Question

我有一个函数，当单击一个按钮并从servlet加载文档时调用该函数。但是，它应该工作的方式是它加载一个多页文档，我有一个我在pdf.js网站上找到的下一个/上一个按钮。

当我加载文档并查看文档时，然后单击打开另一个文档，当我点击下一个/上一个文档时，它仍然会通过旧文档。

例如，我最初将2页文档加载到查看器中。我可以点击下一个/上一个并正常浏览本文档的页面。然后我单击一个按钮来查看下一个文档，这是一个3页的文档。我可以单击下一步查看3页，但是当我点击上一页时，它将返回到我最初加载的上一个文档。

以下是代码：

function getDocument(){


var request = $.ajax({
            url: "IndexServlet",
            type: "POST",
            data: {
                    token: "go",
                    fileName: $("#fileName").val(),
                    batchName: $("#folderName").val()
                  } 
             });

request.done(function( data ) {

var pdfAsArray = convertDataURIToBinary(data);

    function convertDataURIToBinary(dataURI) {
      var base64 = dataURI;
      var raw = window.atob(base64);
      var rawLength = raw.length;
      var array = new Uint8Array(new ArrayBuffer(rawLength));

      for(var i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
      }
      return array;
    }


    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');


    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
      pageRendering = true;
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
        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 () {
          pageRendering = false;
          if (pageNumPending !== null) {
            // New page rendering is pending
            renderPage(pageNumPending);
            pageNumPending = null;
          }
        });
      });

      // Update page counters
      document.getElementById('page_num').textContent = pageNum;
    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finished. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
      if (pageRendering) {
        pageNumPending = num;
      } else {
        renderPage(num);
      }
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
      if (pageNum <= 1) {
        return;
      }
      pageNum--;
      queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      pageNum++;
      queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);

    /**
     * Asynchronously downloads PDF.
     */
     PDFJS.getDocument(pdfAsArray).then(function (pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;

      // Initial/first page rendering
      renderPage(pageNum);
    });


});

}

Answer 1

对于这个答案的想法非常感谢async5：

切换我的下一个和上一个函数，下面是更新后的代码：

function getDocument(){

$("#prev").unbind();
$("#next").unbind();

var pdfDoc = null,
    pageNum = 1,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

var request = $.ajax({
            url: "IndexServlet",
            type: "POST",
            data: {
                    token: "go",
                    fileName: $("#fileName").val(),
                    batchName: $("#folderName").val()
                  } 
             });

 request.done(function( data ) {

 var pdfAsArray = convertDataURIToBinary(data);


 PDFJS.getDocument(pdfAsArray).then(function (pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;


  renderPage(pageNum);

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
    };
    page.render(renderContext);
  });


  document.getElementById('page_num').textContent = pageNum;
}


$("#prev").click(function(){
  if (pageNum > 1) {
   pageNum--;
   //queueRenderPage(pageNum);
   renderPage(pageNum);
  }

});

$("#next").click(function(){
  if (pageNum < pdfDoc.numPages) {
     pageNum++;
     //queueRenderPage(pageNum);
     renderPage(pageNum);

  }


  });
});
});


}



function convertDataURIToBinary(dataURI) {
var base64 = dataURI;
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));

for(var i = 0; i < rawLength; i++) {
 array[i] = raw.charCodeAt(i);
}
return array;
}

pdf.js查看器错误地存储图像数据

1 个答案: