Question

我尝试加载pdfs并将每个页面渲染到画布中。它适用于我只加载一页.pdf而不是我使用多页的时候.pdf

for循环应该像pdf中的页面一样经常运行，

var total =

每个循环我都在创建

<canvas class=''></canvas>

应该将匹配的页码作为类。

can.className = 'pdfpage' + i

但由于某种原因，它总是将总页数计为类。例如。当加载一个五页的.pdf时，它会创建......

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

... 5次而不是＆＃39; pdfpage0＆＃39;，＆＃39; pdfpage1＆＃39;等

我对JS很陌生，所以我不确定我是否正在用正确的方向思考＆＃39; i＆＃39;。我添加了

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

对于循环 - 每个循环更改src

1 个答案: