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

Ler arquivo PDF com NodeJS
01/12/2019JAVASCRIPT

Ler arquivo PDF com NodeJS

Veja como extrair o texto de um arquivo PDF usando NodeJS

Saiba mais...
Sites e aplicativos para praticar o seu inglês
06/11/2022JAVASCRIPT

Sites e aplicativos para praticar o seu inglês

Veja dicas de como melhorar o seu inglês sem colocar a mão no bolso

Saiba mais...

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