PDF.js é um ótimo projeto de código aberto que é atualizado com frequência e novos recursos são adicionados, por mais que pareça feio, ou talvez digamos que pareça desatualizado. Que tal obter os recursos e correções de PDF mais recentes do PDF.js, mas ter uma aparência elegante na apresentação?

O visualizador de PDF do PdfJsKit é discreto, não altera diretamente o código do PDF.js, apenas inclui PDF.js em um iframe e em tempo de execução substitui HTML, JS e CSS para oferecer uma aparência moderna e elegante e uma interface de usuário melhor estrutura e usabilidade e novos recursos. Dessa forma, podemos sempre atualizar facilmente o PDF.js para a versão mais recente e obter todas as correções de bugs e melhorias.

Outros visualizadores de PDF baseados em PDF.js geralmente não atualizam a aparência padrão, e aqueles que o fazem geralmente perdem a funcionalidade devido à separação em componentes, mas os implementam parcialmente ou oferecem uma API ruim/parcial.

Começando

Instale o pacote em seu projeto:

npm install pdfjskit

Quando o pacote for instalado (ou a versão for atualizada), os ativos (css, imagens etc.) usados ​​pelo PdfJsKit serão copiados automaticamente de node_modules\pdfjskit\dist\pdfjskit para public\pdfjskit. O subdiretório público do seu projeto é um local comum para ativos da web, mas se sua estrutura JS tiver uma estrutura de diretório diferente, você poderá mover os ativos para outro local.

Por padrão, o PdfJsKit carrega ativos do subdiretório pdfjskit em relação à página host, mas você pode alterar esse caminho passando a opção bibliotecaPath personalizada para o construtor PdfViewer.

Uso

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Observe que o pacote NPM contém um módulo ES6 pdfjskit.min.mjs, também uma versão de script pdfjskit.min.js é fornecida no diretório GitHub dist/pdfjskit e no pacote de desenvolvedor oferecido aqui.

Usando PdfJsKit em projetos JS simples com Vite

Você pode usar qualquer framework JS (React, Vue, Angular, Svelte, Blazor etc) com PdfJsKit, porém para simplificar neste post, mostrarei o uso para projetos JS simples.

Para projetos JS simples, recomendo usar Vite, desta forma você pode importar facilmente do módulo em arquivos HTML:

1. Crie um modelo de projeto Vite:
   

   npm create vite@latest
   

   Escolha as configurações:
   

   ✔ Project name: … pdfjskit-vite-example
   ✔ Select a framework: › Vanilla
   ✔ Select a variant: › JavaScript
   

2. Um subdiretório com o nome do seu projeto será criado, faça o seguinte:
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. Edite index.html e substitua o conteúdo por:
   

4. Agora você pode executar o servidor web de desenvolvimento:
   

   npm run dev
   

   que mostrará:
   

   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h   enter to show help    
   

   Clique no URL local com a tecla CTRL para iniciar o navegador.
   Você verá que o PDF Viewer é renderizado na página.

Documentação

• Documentos da API HTML
• Documentos da API Markdown
• Base de Conhecimento

Demonstrações ao vivo

• Teste de pacote de módulos
• Teste de pacote de scripts

Links:

• GitHub
• NPM