Visualizing PDFs with Bootstrap and HTML

Are you tired of displaying PDFs in a plain and boring manner on your web applications? By using Bootstrap and HTML, you can visually enhance the way PDFs are displayed on your webpage!

How it Works

1. Add the following link to the section of your HTML document. This will allow you to use the Bootstrap framework.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2. Create a
   element where you want to display your PDF file.

<div id="pdf-viewer"></div>

3. Import the PDF.js library. This allows us to display PDF files in a web page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js"></script>

4. Load the PDF file and render it using PDF.js.

<script>
  var pdfPath = '/path/to/pdf/file.pdf'; // Change this to the correct path
  pdfjsLib.getDocument(pdfPath).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(pageNum);
  });
</script>

5. Define a function to render each page of the PDF.

function renderPage(num) {
  pdfDoc.getPage(num).then(function(page) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var viewport = page.getViewport({scale: 1});
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    document.getElementById('pdf-viewer').appendChild(canvas);
    page.render({canvasContext: ctx, viewport: viewport});
  });
}

6. Finally, add a function to navigate through the PDF pages.

var pdfDoc = null;
var pageNum = 1;
document.getElementById('prev-page').addEventListener('click', function() {
  if(pageNum <= 1)
    return;
  pageNum--;
  document.getElementById('pdf-viewer').innerHTML = '';
  renderPage(pageNum);
});

document.getElementById('next-page').addEventListener('click', function() {
  if(pageNum >= pdfDoc.numPages)
    return;
  pageNum++;
  document.getElementById('pdf-viewer').innerHTML = '';
  renderPage(pageNum);
});

Conclusion

By using Bootstrap and HTML, you can improve the way PDF files are displayed on your web page. This not only enhances the visual aspect, but also improves the user experience.

Give it a try and let us know how it works for you!