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

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

Linda Hamilton

Libérer： 2024-11-30 02:01:11

original

360 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!