Como eu converto meu HTML para PDF usando a biblioteca jsPDF

Como eu converto meu HTML para PDF usando a biblioteca jsPDF

O jsPDF é uma biblioteca Javascript que permite gerar arquivos PDF de forma programática. Não tem dependências e é acessível a partir de qualquer dispositivo com um navegador, para que você possa gerar arquivos PDF rapidamente.

É a única biblioteca que permite gerar PDFs sem precisar instalar nada. Você apenas escreve o código – desta forma, não importa em que tipo de ambiente você está: no trabalho, em casa ou em trânsito.

Baixar código de exemplo

Converter o conteúdo da web em um documento limpo e com aparência profissional pode ser uma tarefa complicada, mas com as ferramentas certas, esse processo pode ser simplificado e muito mais fácil de ser concluído por qualquer pessoa sem qualquer habilidade de codificação.

Em primeiro lugar, você precisa instalar a biblioteca jsPDF:

npm install jspdf --save

Se preferir você também pode usar o CDN,

Crie uma função para gerar PDF, código simples para converter HTML em PDF, ele obtém todo o conteúdo de #dataID e o converte em um arquivo PDF com opções fornecidas como margem, tamanho da página, etc.

function gerarPDF() {
    var doc = new jsPDF("p", "pt", "a4", true);
    var a4Width = Number(doc.internal.pageSize.getWidth());
    doc.fromHTML($("#dataID").html(), 20, 0, {
            pagesplit: true,
            "width": (a4Width - 40) // for margin right
        },
        function(dispose) {
            doc.save("MeuPDF.pdf");
        }
    );
}


HTML:

<div id="PDFID">
<h2>HTML de exemplo para jsPDF</h2>
 
<p>HTML é a linguagem de marcação padrão para a criação de páginas da web</p>
<h4>O que é HTML?</h4>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is the standard markup language for creating Web pages</li>
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
<li>HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.</li>
</ul>
<p>
<!-- It is a Paragraph tag for creating the paragraph -->
<b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and
applications. This language
is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
a flexible way for designing the
web pages along with the text.
</p>
HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag,
attributes and the text between them</i>.
</p>
</div>

Mais ajuda para conhecer a biblioteca jsPDF

Você pode encontrar todas as opções aqui: https://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html se quiser explorá-lo mais.

Você pode obter plug-ins extras aqui: https://github.com/topics/jspdf-plugin

É uma biblioteca muito simples e fácil de usar que você pode implementar em seu site.

O que podemos criar com jsPDF

Espero que goste do tutorial, se você estiver enfrentando algum problema, escreva nos comentários.

A postagem Converter HTML em PDF em Javascript usando jsPDF com download de exemplo apareceu pela primeira vez no PHP Lift.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.