Como salvar a página HTML como PDF usando JavaScript

Como salvar a página HTML como PDF usando JavaScript

Ao criar sites, os web designers devem fornecer a opção para os usuários salvarem um formulário ou página como um PDF. Por exemplo, sites que oferecem admissões de faculdade e universidade usam essa opção, pedindo aos usuários que preencham o aplicativo on -line, baixe -o como um arquivo PDF e envie -o no campus.

Esta postagem descreverá o método para salvar a página HTML como um PDF.

Como salvar a página HTML como PDF usando JavaScript?

Para salvar uma página HTML como PDF, use as bibliotecas JavaScript “JSPDF" com "html2Canvas”. JSPDF é uma biblioteca de código aberto baseado em JavaScript para criar documentos em PDF. Oferece várias possibilidades para criar arquivos PDF com características específicas. Ele inclui uma variedade de plugins para suportar vários métodos de criação de PDF, enquanto o HTML2Canvas é uma biblioteca JavaScript que gera uma visualização dos dados na página.

Exemplo

Em um arquivo HTML, primeiro, criaremos uma página da web com a tabela a seguir:
































Eu iaNomeDesignaçãoData de ingressoIdade
1JohnHr16May200026
2RohndaGerente23June200524
3StephenContador20 de setembro200826

Agora, crie um “Imprimir”Botão que chamará o“imprimir()”Método no evento de clique para converter a página HTML em um arquivo PDF:

Para converter a página HTML em PDF, adicione o “JSPDF" e "html2Canvas”Bibliotecas para a tag no arquivo HTML. Para o "JSPDFBiblioteca, use o código abaixo:

Para o "html2Canvas”Biblioteca, use o link abaixo:

No arquivo JavaScript ou na tag, adicione o seguinte código:

janela.jspdf = janela.JSPDF.jspdf;
var docpdf = novo jspdf ();
function print ()
var elementHtml = documento.QuerySelector ("#printTable");
DOCPDF.html (elementHtml,
retorno de chamada: function (docpdf)
DOCPDF.Salvar ('HTML Linuxhint Web Page.pdf ');
,
x: 15,
y: 15,
Largura: 170,
Windowwidth: 650
);

No código acima:

  • Primeiro, o JavaScript deve carregar a classe JSPDF e usar o objeto JSPDF.
  • Então, defina um “imprimir()”Função que acionará o botão Clique.
  • Usando o “QuerySelector ()”Método, obteremos o conteúdo HTML de um elemento especificado por id.
  • Crie um arquivo PDF convertendo o conteúdo HTML da área selecionada do site.
  • Em seguida, baixe e salve o conteúdo HTML como um arquivo PDF.

A saída indica que a página da web html é convertida com sucesso em um arquivo PDF:

Isso se trata de salvar a página da web html como um PDF em JavaScript.

Conclusão

Para salvar a página da web html como pdf, use o javascript “JSPDF"Biblioteca com a"html2Canvas" biblioteca. O JSPDF é uma biblioteca de código aberto usado para converter a página HTML em PDF, enquanto o HTML2Canvas é usado para criar uma visualização com base nos dados da página. Este post descreveu o método para salvar a página HTML como um PDF.