recherche

Maison >interface Web >js tutoriel >Comment puis-je générer un PDF à partir d'une division HTML en utilisant JavaScript et jsPDF ?

Comment puis-je générer un PDF à partir d'une division HTML en utilisant JavaScript et jsPDF ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-30 02:01:11458parcourir

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

Générer un PDF à partir de HTML dans Div en utilisant JavaScript

Problème

Vous avez du code HTML contenant un div avec un identifiant "pdf" que vous souhaitez pour imprimer dans un fichier PDF nommé "foobar.pdf" à l'aide de JavaScript. Cependant, jspdf n'accepte que les valeurs de chaîne et n'a pas de fonction pour imprimer du HTML.

Solution

Pour permettre à jsPDF d'imprimer du HTML, vous devez inclure les plugins suivants dans votre projet :

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

De plus, si vous souhaitez ignorer certains éléments du HTML, vous pouvez les marquer avec un identifiant, puis utiliser un gestionnaire d'éléments spécial dans jsPDF pour exclure ces éléments de l'impression. Par exemple, le code HTML mis à jour avec un élément ignoré :

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

Code JavaScript

Ce code JavaScript générera un PDF avec le contenu du div "pdf" et l'ouvrira dans un nouvelle 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");

Notes

  • Vous ne pouvez utiliser que les ID d'élément pour l'exclusion dans les gestionnaires d'éléments. Les sélecteurs de classe ne sont pas pris en charge.
  • jsPDF ignore les styles CSS, mais il peut formater les titres (h1, h2, etc.) et le texte dans les nœuds de texte. Les éléments tels que les zones de texte ne sont pas pris en charge pour l'impression.

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 format include using class function
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 ajouter des icônes personnalisées dans React Native en 5Article suivant：Comment ajouter des icônes personnalisées dans React Native en 5

Articles Liés

Voir plus