CODEWITHSUNDEEP
javascripthtml
Skander Melliti
Skander Melliti

Reputation: 3

How to display a pdf in the browser when uploading the pdf file

I'm working on a project and I want to display a pdf file as well as a text file in my web page

I did manage to display the contents of a text file.

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  for (var i = 0, f; f = files[i]; i++) {

    var reader = new FileReader();
    reader.onload = (function(reader) {
      return function() {
        var contents = reader.result;
        var lines = contents.split('\n');

        document.getElementById('container').innerHTML = contents;
      }
    })(reader);

    reader.readAsText(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" name="file" />

<div class="container">
  <div class="backdrop">
    <div class="highlights"></div>
  </div>
  <textarea id="container" style="height: 500px; min-width: 500px"></textarea>
</div>

I want to display both text files and PDF files, thanks for your help guys

Upvotes: 0

Views: 4582

Answers (2)

Andrew L
Andrew L

Reputation: 5486

You can use PDF.js which is community developed and supported by Mozilla Labs.

Looking at their example "Rendering the Page" is the golden ticket here.

I started off the example by breaking out 2 functions (1 to handle the text files and 1 to handle the PDF files) Take a look at the handlePDFFile function and you'll see its somewhat similar, a big difference is we read the file as reader.readAsDataURL(file); instead of reading it as text for the PDF.js library.

for PDF path you will still need to read the file and send the contents of the file to the pdfjsLib.getDocument function. After the loading promise is resolved you will be able to handle the pdf object.

with the pdf object we get the first page and render it onto our canvas. This is only an example so you will need to build on this if you wanted to view multiple pages (only the first page is hard coded).

const PDF_TYPE = "application/pdf";
const TXT_TYPE = "text/plain";

document.getElementById('files').addEventListener('change', handleFileSelect, false);


function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  for (var i = 0, f; f = files[i]; i++) {
    let fileType = files[i].type;
    if (fileType === PDF_TYPE) {
      handlePDFFile(files[i]);
    } else if (fileType === TXT_TYPE) {
      handleTxtFile(files[i])
    } else {
      console.error(`cannot handle file type: ${fileType}`)
    }
  }
}

function handleTxtFile(file) {
  var reader = new FileReader();
  reader.onload = (function(reader) {
    return function() {
      var contents = reader.result;
      var lines = contents.split('\n');

      document.getElementById('container').innerHTML = contents;
    }
  })(reader);

  reader.readAsText(file);
}

function handlePDFFile(file) {
  var reader = new FileReader();

  reader.onload = (function(reader) {
    return function() {
      var contents = reader.result;
      var loadingTask = pdfjsLib.getDocument(contents);

      loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport({
            scale: scale,
          });

          var canvas = document.getElementById('the-canvas');
          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext);
        });
      });
    }
  })(reader);
  reader.readAsDataURL(file);
}
#the-canvas {
  outline: black 3px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
<input type="file" id="files" name="file" />

<div class="container">
  <div class="backdrop">
    <div class="highlights">

    </div>
  </div>
  <textarea id="container" style="height: 200px; min-width: 200px"></textarea>
  <canvas id="the-canvas"></canvas>
</div>

Upvotes: 3

MIH
MIH

Reputation: 125

FOR PDF

Upload your PDF file in Google drive and use its URL in a iframe(like Google Drive) and use its URL in a iframe

<object data="data/test.pdf" type="application/pdf" width="500" height="300">
<a href="data/file.pdf">file.pdf</a>
</object>

Also see this link:-How to Use pdf.js

Upvotes: 0

Related Questions