1. Produtos
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Gerar PDF por meio da API JavaScript de código aberto

Biblioteca JavaScript de código aberto para criação e conversão de arquivos PDF, adicione gráficos e texto ao PDF via JavaScript.

JSPDF é uma solução do lado do cliente HTML5 de código aberto para criação e gerenciamento de documentos PDF. Ele suporta ótimos recursos como relatórios, certificados, emissão de bilhetes e muito mais. Como o PDF é muito popular na web e quase todas as empresas o utilizam para compartilhar documentos e relatórios. Usando apenas alguns comandos, você pode acessar e reutilizar todos os ótimos recursos dentro de seu próprio aplicativo. 

A grande vantagem da biblioteca JsPDF é que ela gera um arquivo PDF quando os usuários clicam no botão de download. Ele inclui suporte para vários recursos proeminentes, como gerar documentos PDF, desenhar formas e inserir imagens em arquivos PDF, adicionar páginas a PDF, adicionar e exibir texto, exportar mapa como PDF, converter HTML em PDF e muito mais.

Previous Next

Introdução ao JsPDF

A maneira mais fácil e recomendada de começar é soltar a biblioteca hospedada da CDN em sua página, abaixo está o comando.

use o código de instalação

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

Gerando documentos PDF via biblioteca JavaScript

JsPDF oferece a funcionalidade para geração de documentos PDF, bem como modificações dentro de aplicativos JavaScript. Você pode facilmente gerar documentos PDF e adicionar uma nova página a ele. Você pode definir a orientação do documento, as unidades e o formato de página padrão ao criar o novo documento. Uma vez que o PDF é gerado, você pode facilmente adicionar novas páginas, inserir imagens, etc. com facilidade.

Crie documentos PDF via JavaScript

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Inserindo texto em documentos PDF via JavaScript

A API JsPDF facilita os desenvolvedores JavaScript para adicionar e exibir texto dentro de um documento PDF. Para desenhar o texto, você precisa definir o nome da fonte. Podemos escolher entre as fontes disponíveis. Também é possível alterar a família da fonte e o estilo da fonte. Depois disso, podemos definir o tamanho da fonte, cor do texto e muito mais.

Adicionar texto a PDF existente usando JavaScript

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Adicionando gráficos a documentos PDF via JavaScript

A biblioteca JsPDF permite que profissionais de JavaScript desenhem gráficos dentro de documentos PDF. Gráficos sempre agregam mais valor ao conteúdo. Primeiro, temos que definir as cores de preenchimento e traçado das formas desenhadas. Também podemos definir a largura do traço. Cada função de desenho de forma toma as coordenadas do ponto central como dois primeiros parâmetros (exceto triângulo). Eles também usam o estilo de desenho do último parâmetro. Podemos desenhar uma elipse, passando dois raios ou círculo, passando apenas um raio, um triângulo, passando as coordenadas de cada canto e muito mais.

Adicionar imagem ao PDF usando JavaScript

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 Português