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.

Comments

No comments yet. Why don’t you start the discussion?

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.