O uso de <iframe>
traz algumas incompatibilidades, principalmente se o navegador não tiver o plugin, as vezes o arquivo faz o download do PDF ao invés de abrir ou aparecer alguma mensagem de erro. Fora que o uso de <table>
pra organizar o layout não é uma boa, prefira float ou até mesmo grids (ou grids de algum "framework CSS").
Pode-se usar <object>
(então se não tiver suporte para um visualizador vai emitir alguma mensagem do próprio navegador falando que não é suportado):
<object data="meuarquivo.pdf" type="application/pdf">
<p>Seu navegador não tem um plugin pra PDF</p>
</object>
Ou usar o PDF.js (Github) que não irá precisar de plugins.
Como começar: https://mozilla.github.io/pdf.js/getting_started/
Pra facilitar pode optar pelos CDNs:
Perguntas frequentes sobre o 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>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="pdf-exemplo"></canvas>
<iframe></iframe>
mas se tiver falando só de visualizar o pdf em um navegador use o firefox ele tem suporte nativo que permite voce abrir pdf no navegador...pdf.js
, muito completo e é da própria mozilla. O único problema é o fato de não rodar bem em IE9 ou menor.