PDF JS с многократным вводом файлов (только последний PDF рендер) - PullRequest
Новая
       10

PDF JS с многократным вводом файлов (только последний PDF рендер)

0 голосов
/ 14 октября 2018

Здесь я создаю предварительный просмотр ввода файла (допускается несколько), несколько jpg и png работают, но если i выбрать несколько pdf, то отображается только последний pdf .Я использую библиотеку PDFJS, Filereader и canvas для создания превью.Я проверил на многих веб-сайтах, и я нашел одну статью, которая отображает несколько PDF: https://bl.ocks.org/palerdot/bf0c52d84aa046a6963c

Вот мой код: 

var pdfArr = [];
$("#upload-button").on('click', function() {
  $("#file-to-upload").trigger('click');
});

$("#file-to-upload").on('change', function(evt) {
  $("#thumbs").html("");
  var fileTypes = ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'pdf', 'doc', 'docx', 'ppt', 'pptx'];
  var tgt = evt.target || window.event.srcElement,
    files = tgt.files;
  for (var i = 0; i < files.length; i++) {
    var extension = files[i].name.split('.').pop().toLowerCase();
    if (FileReader && files && files.length) {
      if (extension == "pdf") {
        fileReader = new FileReader();
        fileReader.onload = function(ev) {
          console.log(ev);
          var img = "";
          PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
            pdf.getPage(1).then(function(page) {

              var viewport = page.getViewport(0.5);

              var canvas = document.createElement('canvas');

              var ctx = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;

              var renderContext = {
                canvasContext: ctx,
                viewport: viewport
              };

              page.render(renderContext).then(function() {
                ctx.globalCompositeOperation = "destination-over";

                ctx.fillStyle = "#fff";

                ctx.fillRect(0, 0, canvas.width, canvas.height);

                var img_src = canvas.toDataURL();


                $("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + img_src + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
                canvas.remove();
              });

            });
          }, function(error) {
            console.log(error);
          });
        };
        fileReader.readAsArrayBuffer(files[i]);
      } else if (extension == "jpg" || extension == "jpeg" || extension == "png") {
        var readerObj = new FileReader();

        readerObj.onload = function(element) {
          $("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + element.target.result + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
        }

        readerObj.readAsDataURL(files[i]);
      }
    }
  }
  $("#pdf-contents").html("");

});

function renderPDF(content) {
  $("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + content + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
}
.card {
  height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>


<button id="upload-button">Select file</button>
<input type="file" id="file-to-upload" multiple />

<div id="pdf-main-container">
  <div class="row" id="thumbs">

  </div>
  <div class="file-preview">
    <img class="img-preview" />
  </div>
  <a class="file-link" download href="" target="_blank">הורד קובץ</a>
</div>

Может кто-нибудь помочь мне в этом?или подскажите что не так в коде?почему отображается только последний pdf?

...