Como gerar um arquivo PDF usando JavaScript
1.0 Introdução
A Adobe desenvolveu o formato de documento portátil (PDF) com o objetivo de compartilhar documentos com texto e gráficos. É necessário um programa adicional para abrir um arquivo PDF online. No mundo moderno, os arquivos PDF são cruciais para documentos importantes. Para criar documentação e faturas, muitas empresas utilizam arquivos PDF. Os desenvolvedores produzem e geram PDFs de documentos para atender às necessidades do cliente. Graças às bibliotecas modernas, criar PDFs nunca foi tão fácil. Ao selecionar a biblioteca ideal para um projeto, devemos considerar diversos fatores, incluindo as capacidades de construção, leitura e conversão da biblioteca.
Neste artigo, discutiremos várias bibliotecas JavaScript para criação de PDFs. Vamos explorar os recursos e casos de uso da biblioteca JS, com foco em três aspectos principais:
- Compatibilidade com o ambiente de tempo de execução
- Suporte para fontes e módulos personalizados para tipografia
- Facilidade de uso
Ao final deste artigo, você será capaz de escolher a biblioteca PDF mais adequada para sua aplicação JavaScript . Também apresentaremos o IronPDF, uma biblioteca de PDF poderosa e prática.
Passos para gerar arquivos PDF em JavaScript
- Utilize o método `text` da biblioteca PDFKit para inserir texto no PDF.
- Utilize o método `createPdf` da biblioteca `pdfmake` em JavaScript.
- Instancie a classe jsPDF da biblioteca jsPDF para criar o PDF.
- Passe as configurações para o método `html2pdf` da biblioteca html2pdf.
- Utilize o método `RenderHtmlAsPdf` da biblioteca IronPDF.
2.0 Bibliotecas
Digamos que queremos que o cliente possa baixar e imprimir uma fatura que temos. Também queremos que esta fatura seja impressa corretamente, com boa formatação. Aqui, vamos analisar algumas das bibliotecas mais populares para converter essa fatura do formato HTML para PDF.
2.1 PDFKit
Uma das primeiras bibliotecas de PDF a ser introduzida no extenso ecossistema JavaScript é o PDFKit. Desde seu lançamento inicial em 2012, o PDFKit ganhou considerável popularidade e continua recebendo atualizações regulares até 2021. Ele oferece suporte tanto for Node.js quanto para navegadores web através do Webpack, embora possa apresentar um nível de complexidade ligeiramente maior em comparação com outras bibliotecas discutidas aqui. Além disso, como veremos na comparação, certas bibliotecas PDF são essencialmente wrappers para o PDFKit.
São suportadas fontes personalizadas e incorporação de imagens; No entanto, não existe uma API de alto nível. Além disso, a documentação costuma ser complicada. Como você pode imaginar, leva algum tempo para se acostumar e, a princípio, você descobrirá que criar PDFs não é a tarefa mais simples.
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
Existe uma biblioteca auxiliar para o PDFKit chamada pdfmake. A principal distinção entre os dois reside em seus paradigmas de programação:
O pdfmake adota uma abordagem declarativa, enquanto o PDFKit segue a técnica imperativa tradicional. Consequentemente, concentrar-se na funcionalidade desejada da geração de PDFs é mais fácil com a biblioteca pdfmake, em vez de gastar tempo instruindo a biblioteca sobre como alcançar um resultado específico.
No entanto, vale ressaltar que nem tudo que parece promissor é perfeito. Utilizar o Webpack e tentar integrar fontes personalizadas com o pdfmake pode potencialmente causar problemas. Infelizmente, há pouca informação disponível online sobre esse problema. Se você não estiver utilizando o Webpack, ainda poderá clonar o repositório Git e executar o script de incorporação de fontes sem dificuldades.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>O resultado do código mencionado é exibido abaixo.
2.3 jsPDF
jsPDF é um pacote de código aberto que utiliza exclusivamente JavaScript puro para gerar arquivos PDF. Ele cria uma página em PDF e a formata de acordo com a formatação fornecida. jsPDF é a biblioteca de PDF mais utilizada no GitHub , sendo altamente confiável e bem mantida. Oferece módulos fáceis de usar tanto for Node.js quanto para navegadores da web, pois são exportados de acordo com o padrão de módulo AMD.
Com relação ao PDFKit, suas APIs seguem um paradigma imperativo, o que pode dificultar a criação de layouts complexos. Quanto à incorporação de fontes, a única etapa adicional necessária é a conversão das fontes para arquivos TTF, um processo bastante simples.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>O resultado do código acima é mostrado abaixo.
2.4 html2pdf
Para converter páginas e modelos da web em arquivos PDF, o html2pdf combina as funcionalidades do jsPDF e do Html2Canvas em um único módulo.
Para converter seu site em PDF, siga estes passos:
- Instale a biblioteca JavaScript html2pdf localmente em seu servidor usando o NPM ou inclua-a em seu código HTML, como mostrado no exemplo abaixo:
- Adicione uma função "gerar PDF" que será chamada para converter o segmento especificado da página da web em um PDF. Você pode usar o método
getElementByIdpara selecionar o segmento desejado. - Personalize as opções de formatação adicionando-as à variável "opt" antes de passá-la para html2pdf. Isso permite definir várias configurações para a geração de PDFs.
- Inclua um botão em sua página HTML que acione a função
generatePDFquando clicado.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>Abaixo está o resultado do código acima.
2.5 IronPDF
IronPDF for Node.js simplifica o processo de criação e personalização programática de documentos PDF. Desenvolvido pela Iron Software, um fornecedor confiável de bibliotecas de processamento de documentos de alto desempenho, o IronPDF oferece uma solução robusta para geração de PDFs em ambientes Node.js Ele se integra perfeitamente a projetos Node.js , fornecendo aos desenvolvedores ferramentas poderosas para gerar, formatar e editar PDFs com facilidade.
A biblioteca IronPDF possui uma ampla gama de recursos, incluindo a capacidade de dividir e combinar páginas em documentos PDF novos ou existentes, ler e editar arquivos PDF existentes, extrair imagens de arquivos PDF, adicionar texto, gráficos, marcadores, marcas d'água, cabeçalhos e rodapés a arquivos PDF, tudo sem a necessidade do Acrobat Reader. A partir de arquivos CSS e de mídia CSS, é possível gerar documentos PDF. O IronPDF permite que os usuários criem, carreguem e atualizem formulários PDF, tanto novos quanto já existentes.
Principais funcionalidades do IronPDF for Node.js:
Geração versátil de PDFs: Com o IronPDF, os desenvolvedores podem gerar PDFs a partir de diversas fontes, incluindo HTML, CSS, JavaScript, imagens e outros tipos de arquivo. Essa flexibilidade permite a criação de documentos PDF dinâmicos e visualmente atraentes, adaptados a requisitos específicos.
- Personalização avançada de documentos: o IronPDF permite que os desenvolvedores aprimorem documentos PDF com recursos como cabeçalhos, rodapés, anexos, assinaturas digitais, marcas d'água e marcadores. Isso permite a criação de PDFs de nível profissional com conteúdo rico e elementos interativos.
- Recursos de segurança: O IronPDF oferece recursos de segurança robustos para proteger PDFs contra acesso não autorizado. Os desenvolvedores podem implementar medidas de segurança como senhas, assinaturas digitais, metadados e outras configurações de segurança para proteger informações confidenciais contidas em documentos PDF.
- Desempenho otimizado: O IronPDF foi projetado para oferecer desempenho ideal, apresentando suporte completo a multithreading e operações assíncronas. Isso garante a geração eficiente de PDFs, tornando-os adequados para aplicações de missão crítica onde o desempenho é fundamental.
Conjunto abrangente de recursos: Com mais de 50 recursos para criar, formatar e editar documentos PDF, o IronPDF oferece uma solução completa para todas as tarefas relacionadas a PDFs. Desde a geração básica de documentos até a personalização e segurança avançadas, o IronPDF oferece uma ampla gama de recursos para atender às necessidades dos desenvolvedores.
Para gerar um arquivo PDF usando JavaScript personalizado , veja o código a seguir, que torna o conteúdo HTML mais atraente sem esforço:
import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();No código acima, inicialmente, um trecho de código JavaScript é definido para alterar a cor de todos os elementos <h1> para vermelho. Esse código é então integrado às opções de renderização, juntamente com a ativação da execução de JavaScript . Em seguida, é especificado um conteúdo HTML contendo um elemento <h1> com o texto "Olá Mundo!!". O documento PDF é gerado a partir deste conteúdo HTML com as opções de renderização definidas, garantindo que o código JavaScript seja executado durante o processo de renderização. Por fim, o documento PDF resultante é salvo como "result1.pdf". Este código demonstra a capacidade do IronPDF de incorporar modificações dinâmicas em JavaScript na geração de PDFs, permitindo que os desenvolvedores criem documentos PDF personalizados e interativos de forma programática.
3.0 Conclusão
Em conclusão, o código JavaScript apresentado acima pode ser suscetível a uso indevido e potenciais riscos de segurança quando utilizado por terceiros. É importante considerar a possibilidade de acesso não autorizado e vulnerabilidades de segurança de dados ao implementar esse tipo de código em um site. Problemas de compatibilidade entre diferentes navegadores e plataformas também devem ser levados em conta, incluindo a necessidade de garantir suporte para navegadores mais antigos que podem não ter todas as funcionalidades necessárias.
Em contrapartida, a biblioteca IronPDF Node.js oferece medidas de segurança aprimoradas para proteção contra possíveis ameaças. Não depende de navegadores específicos e é compatível com todos os principais navegadores. Com apenas algumas linhas de código, os desenvolvedores podem facilmente criar e ler arquivos PDF usando o IronPDF.
A biblioteca oferece diversas opções de licenciamento para atender às diferentes necessidades dos desenvolvedores, incluindo uma licença de avaliação gratuita e licenças adicionais disponíveis para compra. O pacote Lite, com preço de $799, inclui uma licença permanente, um ano de suporte ao produto e opções de atualização, sem taxas recorrentes. Essas licenças podem ser usadas em ambientes de desenvolvimento, teste e produção. Além disso, também está disponível para outras linguagens como C# .NET , Java e Python . Visite o site da IronPDF para obter mais detalhes.
Comece GRATUITAMENTE
Comece GRATUITAMENTE
Agende uma demonstração ao vivo gratuita
Não é necessário cartão de crédito nem criação de conta.
