Visualizar PDF com Javascript

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:

PDF.js

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:

Exportar PDF para imagem

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

Verificar a conexão com o Phonegap
12/03/2017JAVASCRIPT

Verificar a conexão com o Phonegap

Veja um exemplo de como verificar se existe conexão com a Internet

Saiba mais...
Roadmap Javascript
30/01/2022JAVASCRIPT

Roadmap Javascript

Um roteiro de estudos para aprender JavaScript

Saiba mais...

Conteúdo sobre banco de dados sem complicação!