Maison >interface Web >js tutoriel >Comment générer un PDF à partir de HTML dans un Div en utilisant JavaScript ?

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

Linda Hamiltonoriginal: 2024-12-08 10:51:13654parcourir

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

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>

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");

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!

JavaScript css html print String if for while using class JS function this display input issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je créer des objets JavaScript avec des clés dynamiques à partir de variables ?Article suivant：Comment puis-je créer des objets JavaScript avec des clés dynamiques à partir de variables ?

Articles Liés

Voir plus