Como imprimir um arquivo PDF em JavaScript
1.0 Introdução
O formato de documento portátil (PDF) foi desenvolvido pela Adobe com o objetivo de compartilhar documentos com texto e gráficos. É necessário um programa adicional para abrir um documento PDF online. Os arquivos PDF são muito importantes para informações críticas na sociedade atual. Muitas empresas criam documentos e faturas usando arquivos PDF. Para atender às necessidades dos clientes, os desenvolvedores produzem documentos em PDF. Graças às bibliotecas modernas, criar PDFs nunca foi tão fácil.
Para selecionar a biblioteca ideal para um projeto que utiliza esse tipo de biblioteca, devemos ponderar diversos fatores, incluindo as capacidades de compilação, leitura e conversão.
Neste tutorial, vamos explorar diversas bibliotecas JavaScript para gerar PDFs. Analisaremos a biblioteca JS e cenários de aplicação do mundo real, com foco em três pontos principais:
- A configuração em execução
- Os módulos que facilitam a digitação e a personalização de fontes
- Facilidade de uso
Após ler este artigo, você poderá selecionar a biblioteca de PDF ideal para sua aplicação JavaScript . Por fim, também abordaremos o IronPDF, uma biblioteca de PDF útil e eficaz.
Como imprimir um arquivo PDF em JavaScript
- Incorpore o PDF em uma tag iframe.
- Acesse a opção de impressão que acompanha o visualizador de PDF do iframe.
- Imprima o PDF da página atual usando JavaScript.
- Invoque o método `printJS` e passe o ID do elemento para a propriedade imprimível.
- Utilize uma biblioteca alternativa para imprimir em .NET C# usando o método `Print`
2.0 Bibliotecas
Considere o cenário em que desejamos que o cliente possa baixar e imprimir uma cópia da nossa fatura. Precisamos que essa fatura seja impressa com precisão e de forma adequada. Aqui, vamos analisar mais detalhadamente algumas das muitas bibliotecas disponíveis para converter esta fatura do formato de arquivo HTML para PDF.
2.1 Código JavaScript puro
Normalmente, para imprimir o conteúdo de um arquivo PDF, fazemos o download para o nosso computador, abrimos o arquivo e selecionamos a opção de impressão. O JavaScript, por outro lado, facilita a impressão de um arquivo PDF diretamente de uma página da web. Tudo o que você precisa é de um iframe em seu site ou a capacidade de criar um dinamicamente, adicionar o documento e imprimi-lo. Vou demonstrar como usar JavaScript para imprimir um arquivo PDF. Uma página da web dentro de outra página da web é exibida usando um iframe. Para que a página da web seja exibida, o iframe precisa saber sua origem.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Print PDF</title>
</head>
<body>
<iframe
src="Demo.pdf" id="myFrame"
frameborder="0" style="border:0;"
width="300" height="300">
</iframe>
<p>
<input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
</p>
<script>
// JavaScript function to print the PDF inside the iframe
let printPdf = () => {
// Access the iframe
let objFra = document.getElementById('myFrame');
// Focus the iframe's window
objFra.contentWindow.focus();
// Trigger the print dialog
objFra.contentWindow.print();
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>JavaScript Print PDF</title>
</head>
<body>
<iframe
src="Demo.pdf" id="myFrame"
frameborder="0" style="border:0;"
width="300" height="300">
</iframe>
<p>
<input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
</p>
<script>
// JavaScript function to print the PDF inside the iframe
let printPdf = () => {
// Access the iframe
let objFra = document.getElementById('myFrame');
// Focus the iframe's window
objFra.contentWindow.focus();
// Trigger the print dialog
objFra.contentWindow.print();
}
</script>
</body>
</html>Para imprimir um PDF, o conteúdo do documento pode ser exibido usando um iframe e, em seguida, impresso usando JavaScript. Em ambas as situações, é necessário um iframe. No exemplo acima, há um iframe com uma fonte (o PDF). Existe também um elemento de entrada do tipo botão.
A propriedade onclick do botão invocará o método printPdf.
2.2 Print.js
O Print.js foi criado principalmente para nos permitir imprimir arquivos PDF diretamente de nossos aplicativos, sem precisar sair da página, importá-los e imprimi-los pela interface do usuário ou usar elementos incorporados. Esta opção destina-se a circunstâncias especiais em que os usuários precisam apenas imprimir os arquivos PDF e não precisam abri-los ou baixá-los.
Quando os usuários solicitam a impressão de relatórios gerados no servidor, por exemplo, isso pode ser útil. Esses relatórios serão devolvidos a você em formato de documentos PDF. Esses arquivos podem ser impressos sem precisar serem abertos. Em nossos aplicativos, o Print.js oferece uma maneira prática de imprimir esses arquivos.
<!DOCTYPE html>
<html>
<head>
<title>Print.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">
</head>
<body>
<div id="print-area" class="print-main">
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>AAA</td>
<td>25</td>
</tr>
<tr>
<td>BBB</td>
<td>24</td>
</tr>
</table>
</div>
<button id="btnPrint">Print</button>
<script>
$(document).ready(function(){
// When the print button is clicked
$("#btnPrint").on("click", function(){
// Use Print.js to print the content of #print-area
printJS({
printable: 'print-area',
type: 'html'
});
});
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Print.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">
</head>
<body>
<div id="print-area" class="print-main">
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>AAA</td>
<td>25</td>
</tr>
<tr>
<td>BBB</td>
<td>24</td>
</tr>
</table>
</div>
<button id="btnPrint">Print</button>
<script>
$(document).ready(function(){
// When the print button is clicked
$("#btnPrint").on("click", function(){
// Use Print.js to print the content of #print-area
printJS({
printable: 'print-area',
type: 'html'
});
});
});
</script>
</body>
</html>O código acima pode ser usado para imprimir arquivos PDF diretamente do site. Ele mostra que a impressão exibirá todas as strings HTML presentes dentro do elemento HTML com o ID "print-area".
2.3 IronPDF - A Biblioteca PDF for Node.js
IronPDF é uma biblioteca PDF completa for Node.js que se destaca pela precisão, facilidade de uso e velocidade. Oferece uma vasta gama de funcionalidades para gerar, editar e formatar PDFs diretamente a partir de HTML, URLs e imagens em React. Com suporte para diversas plataformas, incluindo Windows, MacOS, Linux, Docker e plataformas em nuvem como Azure e AWS, o IronPDF garante compatibilidade entre plataformas. Sua API intuitiva permite que os desenvolvedores integrem rapidamente a geração e manipulação de PDFs em seus projetos Node.js
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.
Aqui está um exemplo de como gerar e salvar um documento PDF a partir de um arquivo HTML , uma string HTML e uma URL , preservando a formatação para impressão:
import { PdfDocument } from "@ironsoftware/ironpdf";
// An async function to demonstrate how to generate PDF documents
(async () => {
// Create a PDF from a URL
const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
// Save it to a file
await pdfFromUrl.saveAs("website.pdf");
// Create a PDF from a local HTML file
const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
// Save it to a file
await pdfFromHtmlFile.saveAs("markup.pdf");
// Create a PDF from an HTML string
const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
// Save it to a file
await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
// An async function to demonstrate how to generate PDF documents
(async () => {
// Create a PDF from a URL
const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
// Save it to a file
await pdfFromUrl.saveAs("website.pdf");
// Create a PDF from a local HTML file
const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
// Save it to a file
await pdfFromHtmlFile.saveAs("markup.pdf");
// Create a PDF from an HTML string
const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
// Save it to a file
await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();Para mais exemplos de código sobre tarefas relacionadas a PDF, visite esta página de exemplos de código do IronPDF for Node.js
3.0 Conclusão
O usuário pode ver o código JavaScript acima, mas ele pode ser usado indevidamente por terceiros. É possível utilizar o código-fonte desta forma. Além disso, não é difícil adicionar código ao site que coloque em risco a segurança dos dados enviados por meio dele. A biblioteca JavaScript mencionada é visualizada de forma diferente por navegadores diferentes. Portanto, o código deve ser executado em diversos sistemas antes de ser lançado. Como algumas funcionalidades novas não são suportadas por navegadores mais antigos, também precisamos analisar a compatibilidade desses navegadores com outros navegadores. As bibliotecas mencionadas acima podem gerar arquivos PDF. O usuário também deve ter alguma familiaridade com o script com o qual está trabalhando.
Com o processo de integração simples do IronPDF para frameworks e bibliotecas desenvolvidas em JavaScript, a excelente documentação do IronPDF for Node.js e exemplos de código, além do suporte técnico ágil, os desenvolvedores podem começar a usar o programa rapidamente, tornando-o uma das principais opções para gerar e imprimir PDFs de nível profissional em aplicações relacionadas ao Node.js
O IronPDF oferece um período de teste gratuito for Node.js , para que você possa experimentar todas as suas funcionalidades antes de tomar uma decisão informada. Também está disponível para outras linguagens como C# .NET , Java e Python . Visite o site da IronPDF para obter mais detalhes. Faça o download do IronPDF for Node.js na página de download do IronPDF for Node.js
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.
