L'éditeur de Downcodes vous propose un tutoriel sur la façon d'utiliser JavaScript et PHP pour convertir des pages Web HTML en fichiers PDF. Cet article détaillera deux méthodes : utiliser la bibliothèque JavaScript jsPDF et utiliser la bibliothèque PHP TCPDF ou mPDF. La bibliothèque jsPDF permet la conversion directement côté client, tandis que la bibliothèque PHP nécessite un traitement côté serveur. Nous nous concentrerons sur l'explication de l'utilisation de jsPDF et fournirons des exemples de code, couvrant les étapes d'introduction des bibliothèques, de traitement du contenu HTML, de création d'instances PDF, d'ajustement des formats, d'enregistrement de fichiers, etc. Nous présenterons également brièvement la méthode de conversion et les fonctions avancées utilisant PHP. . Implémentation, telle que l'ajout d'images, de filigranes, d'en-têtes et de pieds de page, etc. Quelle que soit la méthode que vous choisissez, cet article vous aidera à effectuer efficacement la conversion HTML en PDF.
La conversion de pages Web en PDF est une exigence courante, qui nous permet d'enregistrer le contenu d'un site Web dans un format fixe. L'utilisation de JavaScript ou de PHP pour convertir des pages Web HTML en PDF inclut : l'utilisation des bibliothèques JavaScript et l'utilisation des bibliothèques PHP. Parmi ces outils de conversion, les bibliothèques JavaScript comme jsPDF et html2pdf.js sont très populaires, tandis que PHP possède des bibliothèques comme TCPDF ou mPDF. Nous nous concentrerons sur l'utilisation de la bibliothèque jsPDF de JavaScript pour réaliser la conversion. En effet, la bibliothèque jsPDF offre un bon support client, est simple à utiliser et peut effectuer la conversion sans communiquer avec le serveur.
jsPDF est une bibliothèque écrite en JavaScript pur qui fonctionne dans un environnement front-end et ne nécessite aucun support back-end. Pour utiliser jsPDF, vous devez d'abord introduire son fichier bibliothèque dans le projet. Vous pouvez l'installer à partir du référentiel GitHub de jsPDF ou via npm. Une fois la bibliothèque jsPDF introduite, vous pouvez utiliser le code JavaScript pour lire le contenu HTML et utiliser l'API fournie par jsPDF pour générer des fichiers PDF.
Pour démarrer le processus de conversion, vous devez d'abord importer jsPDF dans votre page Web. Vous pouvez directement télécharger la bibliothèque jsPDF et passer
Ou installez en utilisant npm :
npm installer jspdf
Importez-le ensuite dans votre fichier JavaScript :
importer { jsPDF } depuis jspdf ;
Avant de générer le PDF, vous souhaiterez peut-être modifier le code HTML pour vous assurer que le fichier PDF converti répond à vos besoins. Par exemple, vous devrez peut-être masquer certains éléments de la page et conserver uniquement le contenu principal.
// Récupère les éléments HTML à convertir
const element = document.getElementById('content-to-pdf');
// Modifier le contenu HTML, par exemple en masquant les éléments inutiles
element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');
Créez une nouvelle instance jsPDF et utilisez l'API fournie par jsPDF pour lire les éléments HTML et les convertir au format PDF.
const doc = nouveau jsPDF();
// Supposons que vous souhaitiez que la page soit rendue dans un PDF au format A4
doc.html(document.body, {
rappel : fonction (doc) {
doc.save('page web.pdf');
},
x : 10,
oui : 10,
largeur : 190,
largeur de la fenêtre : document.body.scrollWidth
});
Pendant le processus de conversion, vous devrez peut-être ajuster le format et la mise en page du PDF, comme la taille de la page, les marges ou si vous devez imprimer en orientation paysage, etc.
const doc = nouveau jsPDF({
orientation : 'p', // portrait
unité : 'mm', // L'unité est le millimètre
format : 'a4', // Le format est du papier A4
});
Une fois le contenu HTML converti en PDF, vous pouvez utiliser la méthode save() pour enregistrer le fichier ou traiter les données PDF résultantes.
doc.save('converted-webpage.pdf'); // Enregistrer le fichier PDF
Si vous souhaitez effectuer une conversion HTML en PDF côté serveur, vous pouvez utiliser des bibliothèques PHP telles que TCPDF ou mPDF. Pour utiliser ces bibliothèques, vous devez d'abord les introduire dans votre environnement PHP, généralement via Composer.
le compositeur nécessite tecnickcom/tcpdf
Créez ensuite un objet TCPDF dans le script PHP et utilisez les méthodes fournies par l'objet pour convertir le code HTML au format PDF.
require_once('tcpdf_include.php');
//Créer un nouveau document PDF
$pdf = nouveau TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, vrai, 'UTF-8', faux) ;
//Définir les informations du document
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Votre nom');
$pdf->SetTitle('Exemple TCPDF 001');
$pdf->SetSubject('Tutoriel TCPDF');
$pdf->SetKeywords('TCPDF, PDF, exemple, test, guide');
//Ajouter une page
$pdf->AddPage();
//Définir le contenu
$html = '
$pdf->writeHTML($html, vrai, faux, vrai, faux, '');
// Sortie PDF
$pdf->Output('exemple_001.pdf', 'I');
Lors de la conversion PDF, vous souhaiterez peut-être prendre en compte les styles et les polices du document pour vous assurer que le fichier PDF résultant conserve le style du contenu Web.
jsPDF et TCPDF fournissent tous deux une prise en charge de base des styles. Vous pouvez utiliser les styles CSS directement en HTML ou appliquer des styles lors de la génération de PDF. Cependant, comme les fichiers PDF ne sont pas rendus exactement de la même manière que les pages Web, il peut y avoir de légères différences. Pour jsPDF, la prise en charge de CSS peut être améliorée via des plug-ins. Avec TCPDF, vous devez ajuster soigneusement le CSS pour obtenir les meilleurs résultats.
doc.setFont(helvetica);
doc.setFontStyle(gras);
doc.setFontSize(16);
doc.text(Bonjour tout le monde !, 10, 10);
$html = '
$pdf->writeHTML($html, vrai, faux, vrai, faux, '');
Pendant le processus de conversion PDF, vous devrez peut-être également gérer certaines fonctions avancées, telles que l'ajout d'en-têtes et de pieds de page, de filigranes, de tableaux, d'images, etc. Ces fonctionnalités sont généralement prises en charge dans les bibliothèques jsPDF et TCPDF, mais elles sont implémentées légèrement différemment. Selon des besoins spécifiques, vous pouvez appeler la fonction bibliothèque correspondante pour y parvenir.
jsPDF fournit diverses méthodes pour améliorer les fonctionnalités du PDF, telles que addImage() pour ajouter des images, setProperties() pour définir les propriétés du document, etc.
// ajoute une image
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
TCPDF fournit également des fonctions puissantes pour gérer le contenu avancé du PDF.
// Définir l'en-tête
$pdf->setHeaderData('', 0, 'Titre', 'En-tête', array(0,64,255), array(0,64,128));
$pdf->setHeaderFont(Array('helvetica', '', 10));
//Ajouter un filigrane
$pdf->SetAlpha(0.3);
$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);
// Restaurer la transparence totale
$pdf->SetAlpha(1);
En résumé, utiliser JavaScript ou PHP pour convertir des pages Web HTML en fichiers PDF implique de choisir une bibliothèque appropriée, de traiter le contenu des pages Web, d'ajuster la mise en page du PDF et d'utiliser les fonctions avancées fournies par la bibliothèque pour répondre à des exigences de personnalisation complexes. Que vous choisissiez jsPDF côté client ou TCPDF côté serveur, les étapes et méthodes de mise en œuvre de base sont similaires. Lors de la mise en œuvre spécifique, les outils et méthodes les plus appropriés doivent être sélectionnés en fonction des besoins réels et de l'environnement du projet.
1. Comment convertir une page Web HTML en PDF à l'aide de JavaScript ?
Vous pouvez utiliser la bibliothèque jsPDF pour convertir des pages Web HTML en PDF. Cette bibliothèque vous permet de générer des fichiers PDF en JavaScript front-end. Vous pouvez le faire en restituant le contenu d'un élément HTML sur un canevas, puis en utilisant jsPDF pour convertir le canevas en fichier PDF. De cette façon, vous pouvez générer des fichiers PDF directement sur le client.2. Comment convertir des pages Web HTML en PDF en utilisant PHP ?
Le moyen le plus courant de convertir des pages Web HTML en PDF à l'aide de PHP consiste à utiliser la bibliothèque TCPDF ou mPDF. Les deux bibliothèques peuvent générer des fichiers PDF côté serveur. Il vous suffit d'installer la bibliothèque correspondante sur le serveur, puis d'utiliser PHP pour restituer les pages Web HTML en fichiers PDF.3. En plus de jsPDF, TCPDF et mPDF, quels autres outils peuvent convertir des pages Web HTML en PDF ?
En plus des outils courants jsPDF, TCPDF et mPDF, il existe d'autres outils capables de convertir des pages Web HTML en PDF, tels que : wkhtmltopdf, PhantomJS, etc. Ces outils peuvent tous s'exécuter en arrière-plan pour restituer des pages Web HTML en fichiers PDF. Vous pouvez choisir l'outil qui vous convient le mieux en fonction de vos besoins pour réaliser la fonction de conversion de pages Web en PDF.J'espère que ce tutoriel pourra vous aider à maîtriser les compétences de conversion HTML en PDF. L'éditeur de Downcodes vous souhaite une bonne programmation !