Visualizar PDF com Javascript
A exibição de um PDF ou a conversão de uma página em PDF para uma imagem são operações que podem ser feitas utilizando uma biblioteca chamada PDF.js
Para baixar, você pode acessar este link:
Todo o trabalho é feito do lado do navegador. Você pode criar um visualizador web para seu arquivo PDF, ou pode criar uma página de upload. Ele não permite utilizar PDFs que estejam hospedados em outros sites.
Para utilizar, o seu visitante deve ter um navegador que seja compatível com recurso do HTML5, ou seja, navegadores muito velhos podem ter problemas ou não abrir, mas a maioria dos visitantes não deve ter problemas.
A estrutura da programação não tem muito segredo, se você estiver acostumado a trabalhar com "promises" não deve ter muito problema. Aqui segue um exemplo de como carregar um arquivo PDF.
pdfjsLib.getDocument( meu_arquivo.pdf )
Para utilizar o seu PDF, você precisa esperar primeiro o arquivo carregar
var loadingTask = pdfjsLib.getDocument( meu_arquivo.pdf );
loadingTask.promise.then(function(pdf) {
// Agora você pode utilizar o arquivo
});
Depois de carregar o arquivo, você deve selecionar a página. O código ficaria assim:
var loadingTask = pdfjsLib.getDocument( meu_arquivo.pdf );
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
// Agora você pode trabalhar com a página
});
});
Com a página selecionada, basta agora escolher o lugar dentro do seu HTML onde ela deve ser exibida. O código final ficaria da seguinte forma:
var loadingTask = pdfjsLib.getDocument( meu_arquivo.pdf );
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
//ID do elemento HTML onde vou imprimir a pagina
var canvas = document.getElementById( id_do_elemento_HTML );
var context = canvas.getContext( 2d );
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
Aqui tem um exemplo mais sofisticado, onde você pode fazer o upload de um arquivo PDF, navegar pelas páginas, e exportar a página atual no formato PNG.
Toda a programação e os comentários podem ser vistos no código-fonte do link a seguir:
