使用 PDF.js 将每个 PDF 页面添加到新画布答案

【问题标题】：Every PDF page to new canvas using PDF.js使用 PDF.js 将每个 PDF 页面添加到新画布
【发布时间】：2014-07-15 00:17:21
【问题描述】：

请帮我解决这个问题。我试图从 pdf 单个画布和显示页面创建每个页面。如果我多次单击此按钮，它会创建每个页面。但是如果我使用循环它会很糟糕。以下是它适用于多次单击按钮的示例：

var currentPage = 0;
$(".btn-create").click( function(){

    inputScale = $(".input-scale").val();
    documentURL = $(".documenturl").val();

    var numPages = 0;
    var thePDF = null;

    PDFJS.getDocument(documentURL).then(function(pdf) {

        thePDF = pdf;
        numPages = pdf.numPages;

    });

        currentPage++;

        $(".workspace").append("<canvas id='the-canvas"+currentPage+"'></canvas>");

        PDFJS.getDocument(documentURL).then(function(pdf) {

            pdf.getPage(currentPage).then(function(page) {
                var scale = inputScale;
                var viewport = page.getViewport(scale);
                var canvas = document.getElementById('the-canvas'+currentPage);
                var context = canvas.getContext('2d');

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);

            });
        });
});

但如果我将它与循环一起使用，它只会创建最后一个变形页面。

var currentPage = 0;
$(".btn-create").click( function(){

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

       // SAME CODE AS IN PREVIOUS BUTTON 

    }

});

感谢您的每一个帮助。卡斯塔

【问题讨论】：

没有完整的代码很难说，但看起来你犯了一个基本的 js 错误——在 for 循环中定义的函数中使用变量。有关修复，请参阅 ejohn.org/apps/learn/#62 和 #63。

标签： jquery loops pdf canvas pdf.js

【解决方案1】：

我目前正在我的一个应用中执行此操作：

PDFJS.getDocument(url).then(
  function getPdf(pdf) {

  // Set number of pages to repeat canvas elements
  $scope.numPages = pdf.numPages;

  var getPages = function(pageCount){
      var pagePromises = [];
      if (pageCount > 0){
        for (var q = 0; q < pageCount; q++) {
            pages.push({});
        }
        $scope.pages = pages;
        _.each(pages, function(page, i){
            pdf.getPage(i+1).then(function getPage(page) {
              var scale = 1;
              var viewport = page.getViewport(scale);

              // Prepare canvas using PDF page dimensions
              // Each canvas element must have a unique id
              var canvasId = '' + 'someUniqueIdentifer';


              var canvas = document.getElementById(canvasId);

              var context = canvas.getContext('2d');

              canvas.height = viewport.height;
              canvas.width = viewport.width;
              // $log.debug('PDF canvas: ', canvas);
              //
              // Render PDF page into canvas context
              //
              var pageRendering = page.render({canvasContext: context, viewport: viewport});

              // Using a callback to do stuff before render
              var completeCallback = pageRendering.internalRenderTask.callback;
              pageRendering.internalRenderTask.callback = function (error) {
                    //Step 1; What you want to do before calling the complete method         
                    //Step 2: Call it       
                    completeCallback.call(this, error);
                    //Step 3: do some more stuff
              };
            });
        });
      }
  };
});

它使用 Angular 来处理画布元素的重复和 id 生成，但在 JQuery 中做同样的事情应该是微不足道的。

【讨论】：