O editor de Downcodes traz para você um tutorial sobre como usar JavaScript e PHP para converter páginas HTML em arquivos PDF. Este artigo irá detalhar dois métodos: usando a biblioteca JavaScript jsPDF e usando a biblioteca PHP TCPDF ou mPDF. A biblioteca jsPDF permite a conversão diretamente no lado do cliente, enquanto a biblioteca PHP requer processamento no lado do servidor. Vamos nos concentrar em explicar como usar jsPDF e fornecer exemplos de código, cobrindo as etapas de introdução de bibliotecas, processamento de conteúdo HTML, criação de instâncias de PDF, ajuste de formatos, salvamento de arquivos, etc. Também apresentaremos brevemente o método de conversão e funções avançadas usando PHP . Implementação, como adição de imagens, marcas d'água, cabeçalhos e rodapés, etc. Não importa o método escolhido, este artigo o ajudará a concluir a conversão de HTML para PDF com eficiência.
A conversão de páginas da web em PDF é um requisito comum, que nos permite salvar o conteúdo do site em um formato fixo. Usar JavaScript ou PHP para converter páginas HTML em PDF inclui: usar bibliotecas JavaScript e usar bibliotecas PHP. Entre essas ferramentas de conversão, bibliotecas JavaScript como jsPDF e html2pdf.js são muito populares, enquanto PHP possui bibliotecas como TCPDF ou mPDF. Vamos nos concentrar no uso da biblioteca jsPDF de JavaScript para obter a conversão. Isso ocorre porque a biblioteca jsPDF fornece um bom suporte ao cliente, é simples de operar e pode concluir a conversão sem se comunicar com o servidor.
jsPDF é uma biblioteca escrita em JavaScript puro que funciona em um ambiente front-end e não requer suporte back-end. Para usar jsPDF, primeiro você precisa introduzir seu arquivo de biblioteca no projeto. Você pode instalá-lo a partir do repositório GitHub do jsPDF ou via npm. Depois que a biblioteca jsPDF for introduzida, você poderá usar o código JavaScript para ler o conteúdo do HTML e usar a API fornecida pelo jsPDF para gerar arquivos PDF.
Para iniciar o processo de conversão, primeiro você precisa importar o jsPDF para sua página da web. Você pode baixar diretamente a biblioteca jsPDF e passar
Ou instale usando npm:
npm instalar jspdf
Em seguida, importe-o em seu arquivo JavaScript:
importar {jsPDF} do jspdf;
Antes de gerar o PDF, você pode modificar o HTML para garantir que o arquivo PDF convertido atenda às suas necessidades. Por exemplo, pode ser necessário ocultar determinados elementos da página e manter apenas o conteúdo principal.
// Obtém os elementos HTML que precisam ser convertidos
elemento const = document.getElementById('conteúdo para pdf');
// Modifica o conteúdo HTML, como ocultar elementos desnecessários
element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');
Crie uma nova instância do jsPDF e use a API fornecida pelo jsPDF para ler elementos HTML e convertê-los em formato PDF.
const doc = novo jsPDF();
// Suponha que você queira que a página seja renderizada em um PDF tamanho A4
doc.html(documento.body, {
retorno de chamada: função (doc) {
doc.save('webpage.pdf');
},
x: 10,
e: 10,
largura: 190,
largura da janela: document.body.scrollWidth
});
Durante o processo de conversão, pode ser necessário ajustar o formato e o layout do PDF, como tamanho da página, margens ou se precisa imprimir na orientação paisagem, etc.
const doc = novo jsPDF({
orientação: 'p', // retrato
unidade: 'mm', // A unidade é milímetros
format: 'a4', // O formato é papel A4
});
Depois que o conteúdo HTML for convertido em PDF, você poderá usar o método save() para salvar o arquivo ou processar os dados PDF resultantes.
doc.save('converted-webpage.pdf'); // Salva o arquivo PDF
Se quiser realizar a conversão de HTML para PDF no lado do servidor, você pode usar bibliotecas PHP como TCPDF ou mPDF. Para usar essas bibliotecas, você precisa primeiro introduzi-las em seu ambiente PHP, geralmente através do Composer.
compositor requer tecnickcom/tcpdf
Em seguida, crie um objeto TCPDF no script PHP e use os métodos fornecidos pelo objeto para converter o código HTML para o formato PDF.
require_once('tcpdf_include.php');
//Cria um novo documento PDF
$pdf = novo TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, verdadeiro, 'UTF-8', falso);
//Definir informações do documento
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Seu Nome');
$pdf->SetTitle('TCPDF Exemplo 001');
$pdf->SetSubject('Tutorial TCPPDF');
$pdf->SetKeywords('TCPDF, PDF, exemplo, teste, guia');
//Adiciona uma página
$pdf->AdicionarPágina();
//Definir conteúdo
$html='
$pdf->writeHTML($html, verdadeiro, falso, verdadeiro, falso, '');
// Saída PDF
$pdf->Saída('exemplo_001.pdf', 'I');
Ao lidar com a conversão de PDF, você pode considerar os estilos e fontes do documento para garantir que o arquivo PDF resultante mantenha o estilo do conteúdo da web.
Tanto o jsPDF quanto o TCPDF fornecem suporte básico para estilos. Você pode usar estilos CSS diretamente em HTML ou aplicar estilos ao gerar PDF. No entanto, como os PDFs não são renderizados exatamente da mesma forma que as páginas da web, pode haver pequenas diferenças. Para jsPDF, o suporte para CSS pode ser aprimorado por meio de plug-ins. Com o TCPDF, você precisa ajustar cuidadosamente o CSS para obter os melhores resultados.
doc.setFont(helvética);
doc.setFontStyle(negrito);
doc.setFontSize(16);
doc.text(Olá mundo!, 10, 10);
$html='
$pdf->writeHTML($html, verdadeiro, falso, verdadeiro, falso, '');
Durante o processo de conversão de PDF, você também pode precisar lidar com algumas funções avançadas, como adicionar cabeçalhos e rodapés, marcas d'água, tabelas, imagens, etc. Esses recursos geralmente são suportados nas bibliotecas jsPDF e TCPDF, mas são implementados de maneira um pouco diferente. De acordo com necessidades específicas, você pode chamar a função de biblioteca correspondente para alcançá-la.
jsPDF fornece vários métodos para aprimorar a funcionalidade do PDF, como addImage() para adicionar imagens, setProperties() para definir propriedades do documento, etc.
//adiciona imagem
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
TCPDF também oferece funções poderosas para lidar com conteúdo avançado de PDF.
//Definir cabeçalho
$pdf->setHeaderData('', 0, 'Título', 'Cabeçalho', array(0,64,255), array(0,64,128));
$pdf->setHeaderFont(Array('helvetica', '', 10));
//Adiciona marca d'água
$pdf->SetAlpha(0.3);
$pdf->Image('marca d'água.png', 25, 110, 160, 40, '', '', '', falso, 300, '', falso, falso, 0);
//Restaura total transparência
$pdf->SetAlpha(1);
Resumindo, usar JavaScript ou PHP para converter páginas HTML em arquivos PDF envolve escolher uma biblioteca apropriada, processar o conteúdo da página web, ajustar o layout do PDF e usar as funções avançadas fornecidas pela biblioteca para atingir requisitos complexos de personalização. Independentemente de você escolher jsPDF no lado do cliente ou TCPDF no lado do servidor, as etapas e métodos básicos de implementação são semelhantes. Durante a implementação específica, as ferramentas e métodos mais apropriados precisam ser selecionados com base nas necessidades reais e no ambiente do projeto.
1. Como converter uma página HTML em PDF usando JavaScript?
Você pode usar a biblioteca jsPDF para converter páginas HTML em PDF. Esta biblioteca permite gerar arquivos PDF em JavaScript front-end. Você pode fazer isso renderizando o conteúdo de um elemento HTML em um Canvas e depois usando jsPDF para converter o Canvas em um arquivo PDF. Desta forma você pode gerar arquivos PDF diretamente no cliente.2. Como converter páginas HTML em PDF usando PHP?
A maneira mais comum de converter páginas HTML em PDF usando PHP é usar a biblioteca TCPDF ou mPDF. Ambas as bibliotecas podem gerar arquivos PDF no lado do servidor. Você só precisa instalar a biblioteca correspondente no servidor e, em seguida, usar PHP para renderizar páginas HTML em arquivos PDF.3. Além de jsPDF, TCPDF e mPDF, quais outras ferramentas podem converter páginas HTML em PDF?
Além dos jsPDF, TCPDF e mPDF comuns, existem outras ferramentas que podem converter páginas HTML em PDF, como: wkhtmltopdf, PhantomJS, etc. Todas essas ferramentas podem ser executadas em segundo plano para renderizar páginas HTML em arquivos PDF. Você pode escolher a ferramenta que melhor se adapta a suas necessidades para realizar a função de conversão de páginas da web em PDF.Espero que este tutorial possa ajudá-lo a dominar as habilidades de conversão de HTML em PDF. O editor do Downcodes deseja uma boa programação!