For 循环 - 每次循环更改 src

Question

我正在尝试加载 pdf 并将每个页面呈现为 canvas。当我只加载单页 .pdf 时有效，但当我使用多页 .pdf

时无效

for 循环应该运行与 pdf 中的页面一样频繁，

var total =

我创建的每个循环

<canvas class=''></canvas>

匹配的页码应为 class。

can.className = 'pdfpage' + i

但由于某种原因，总页数始终为 class。例如。加载五页 .pdf 时，它会创建...

<canvas class='pdfpage5'></canvas>

...5 次而不是 'pdfpage0'、'pdfpage1' 等

我是 JS 的新手，所以我不确定我是否在考虑 'i' 的正确方向。我添加了

console.log('i is: ' + i);

确认我真的每回合都+1。

<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
  if (file = document.getElementById('pdf').files[0]) {
    fileReader = new FileReader();
    fileReader.onload = function(ev) {
      console.log(ev);
      PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
        var total = pdf.numPages;
        for (var i = 0; i < total; i++) {
        console.log('i is: ' + i);
        console.log('total pages: ' + total);
        //
        // Fetch the first page
        //
        console.log(pdf)
        pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
          var scale = 1.0;
          var viewport = page.getViewport(scale);
          //
          // Prepare canvas using PDF page dimensions
          //
          var div = document.getElementById('1');
          var can = document.createElement('canvas');
            can.className = 'pdfpage' +i;
            div.appendChild(can);
          canvas = document.getElementsByClassName('pdfpage' +i);
          var context = canvas[0].getContext('2d');
          canvas[0].height = viewport.height;
          canvas[0].width = viewport.width;
          //
          // Render PDF page into canvas context
          //
          var task = page.render({canvasContext: context, viewport: viewport})
          task.promise.then(function(){
            console.log(canvas[0].toDataURL('image/jpeg'));
            var dataURL = canvas[0].toDataURL('image/jpeg');                

          });
        });
        }
      }, function(error){
        console.log(error);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
}
 </script>
</div>

Answer 1

试试这个，它应该添加所需的类名

<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
  if (file = document.getElementById('pdf').files[0]) {
    fileReader = new FileReader();
    fileReader.onload = function(ev) {
      console.log(ev);
      PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
        var total = pdf.numPages;
        for (var i = 0; i < total; i++) {
        console.log('i is: ' + i);
        console.log('total pages: ' + total);
        //
        // Fetch the first page
        //
        console.log(pdf)
        pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
          var scale = 1.0;
          var viewport = page.getViewport(scale);
          //
          // Prepare canvas using PDF page dimensions
          //
          var div = document.getElementById('1');
          var can = document.createElement('canvas');
            can.className = 'pdfpage' +(page.pageIndex + 1);
            div.appendChild(can);
          canvas = document.getElementsByClassName('pdfpage' +(page.pageIndex + 1));
          var context = canvas[0].getContext('2d');
          canvas[0].height = viewport.height;
          canvas[0].width = viewport.width;
          //
          // Render PDF page into canvas context
          //
          var task = page.render({canvasContext: context, viewport: viewport})
          task.promise.then(function(){
            console.log(canvas[0].toDataURL('image/jpeg'));
            var dataURL = canvas[0].toDataURL('image/jpeg');                

          });
        });
        }
      }, function(error){
        console.log(error);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
}
 </script>
</div>

基本上，我所做的就是在回调函数中将i替换为page.pageIndex +1

For 循环 - 每次循环更改 src

For Loop - Changing src every loop

javascript

pdf

for-loop

canvas

pdf.js