Display PDF file in the body of the HTML page

Question

I am creating an HTML page and would like to know if it is possible to display a PDF file in the body of the page, so that it can be viewed without having to open the file or download.

Or I will have to save the PDF as an image and display it on the page?

If possible, I would like a solution suggestion that works on any browser

Answer 1

The use of <iframe> brings some incompatibilities, especially if the browser does not have the plugin, sometimes the file downloads the PDF instead of opening or appearing some error message. Other than the use of <table> to organize the layout is not a good, prefer float or even grids (or grids of some "CSS framework").

One can use <object> (so if you don’t have support for a viewer you will send some message from the browser itself saying that it is not supported):

<object data="meuarquivo.pdf" type="application/pdf">
    <p>Seu navegador não tem um plugin pra PDF</p>
</object>

Or use the PDF.js (Github) you will not need plugins.

How to start: https://mozilla.github.io/pdf.js/getting_started/

To facilitate you can opt for Cdns:

• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://cdnjs.com/libraries/pdf.js
• https://unpkg.com/pdfjs-dist/

Frequently Asked Questions about PDF.js: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('pdf-exemplo'),
    ctx = canvas.getContext('2d');


function renderPage(num) {
  pageRendering = true;

  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  document.getElementById('page_num').textContent = num;
}


function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * mostra a página anterior
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * mostra a proxima página
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Download assincrono do PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});

#pdf-exemplo {
    border: 1px solid black;
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<div>
  <button id="prev">Proxima página</button>
  <button id="next">Página anterior</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="pdf-exemplo"></canvas>

Answer 2

Put a iframe with the PDF file link:

<iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe>

UPDATE (2 Iframes):

<table cellpadding="0" cellspacing="0" align="center" width="100%" height="100%">
<tr>
<td><iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe></td>
<td><iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe></td>
</tr>

Answer 3

The use of iframe may bring some unwanted results such as appearing only this fragment in search results of searchers. In the method below, the PDF is directly embedded in the document. This method has shown a good functioning in all browsers:

<embed src="http://www.meudominio.com.br//meu_documento.pdf" width="760" height="500" type='application/pdf'>

Example: http://www.runtal.com.br/pg_00992.php