Comment générer un PDF à partir de HTML dans un Div en utilisant JavaScript ?-js tutoriel-php.cn

Comment générer un PDF à partir de HTML dans un Div en utilisant JavaScript ?

Linda Hamilton

Libérer： 2024-12-08 10:51:13

original

653 Les gens l'ont consulté

How to Generate a PDF from HTML within a Div using JavaScript?

Générer un PDF à partir de HTML en div en utilisant Javascript

La tâche à accomplir est de convertir le contenu d'un div avec l'ID "pdf" dans un document PDF. Ce document PDF doit être automatiquement téléchargé avec le nom de fichier « foobar.pdf ».

Bien que jspdf soit couramment utilisé pour la génération de PDF, la limitation de sa fonction de texte présente un défi. Il n'accepte que les valeurs de chaîne, alors que la saisie HTML est requise. Pour résoudre ce problème, des plugins, tels que jspdf.plugin.from_html.js et jspdf.plugin.split_text_to_size.js, sont requis. Voici comment utiliser ces plugins pour obtenir le résultat souhaité :

Commencez par incorporer les scripts nécessaires dans votre projet :

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Copier après la connexion

Si certains éléments nécessitent pour être exclus du PDF, ils doivent se voir attribuer un identifiant et être identifiés dans un gestionnaire d'éléments spécial de jsPDF. Par exemple, pour exclure l'élément portant l'ID « ignorePDF », modifiez le code HTML comme suit :

<!DOCTYPE html>
<html>
  <body>
    <p>

Copier après la connexion

Le code JavaScript suivant générera le PDF et l'affichera dans une fenêtre contextuelle. fenêtre :

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Copier après la connexion

Cette méthode créera un PDF contenant le texte « imprimer ceci en pdf ».

C'est crucial à noter que les gestionnaires d'éléments spéciaux gèrent principalement les identifiants dans la version actuelle. Par conséquent, l'utilisation de sélecteurs de classe (par exemple, « .ignorePDF ») ne produira pas le résultat escompté.

De plus, jsPDF ne prend pas en charge le style CSS et n'imprimera que le texte dans les nœuds de texte. Par conséquent, les valeurs des zones de texte et des éléments similaires ne seront pas incluses dans le PDF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!