Passer au contenu du pied de page
AIDE NODE

JsdomNPM (Comment ça marche pour les développeurs)

Lorsque JSDOM et IronPDF sont combinés dans Node.js, les programmeurs ont accès à un ensemble d'outils étendu pour créer et modifier des documents PDF. Une implémentation purement JavaScript du DOM W3C appelée JSDOM rend possible la manipulation de documents HTML et XML côté serveur de manière similaire à ce qui est possible dans un navigateur. Inversement, IronPDF utilise des API simples de Node.js pour faciliter la création de PDFs de haute qualité à partir de contenu HTML.

Combiner JSDOM et IronPDF permet aux développeurs de transformer facilement des pages web en PDFs dans leurs applications Node.js, de modifier des PDFs existants et de créer des documents PDF à partir de modèles HTML à la volée. Cette combinaison est une excellente option pour les projets nécessitant de solides capacités de création de PDFs, car elle assure non seulement la conformité avec les technologies web contemporaines, mais accélère également les opérations de génération de documents.

Qu'est-ce que JSDOM NPM ?

JSDOM NPM (Node Package Manager) is a JavaScript qui vous permet d'utiliser Node.js pour analyser et travailler avec des documents HTML. Il offre un environnement semblable à celui d'un navigateur à l'intérieur de Node.js et prend en charge le DOM (Modèle d'objet de document) du W3C. En conséquence, vous pouvez manipuler les caractéristiques et le contenu des documents HTML et XML de manière programmée. Vous pouvez même simuler des actions telles que des clics et des soumissions de formulaires.

JSDOM NPM (Comment ça fonctionne pour les développeurs): Figure 1

JSDOM est très utile pour des activités telles que la création de rapports basés sur HTML, la vérification et le test de sites web, et l'extraction de données web (web scraping). Lorsqu'on travaille avec des pages HTML dans un environnement côté serveur, où les fonctions standards des navigateurs ne sont pas disponibles, il aide les développeurs. Le package JSDOM NPM comble le fossé entre les fonctionnalités du navigateur côté client et le JavaScript côté serveur en gérant la manipulation et l'interaction HTML dans les applications Node.js.

Avec son implémentation de nombreuses fonctionnalités web robustes, JSDOM dans Node.js est un outil utile pour les développeurs travaillant dans des environnements côté serveur avec des documents HTML et XML. Les caractéristiques saillantes de JSDOM sont les suivantes :

Implémentation du DOM W3C

Une implémentation complète en JavaScript de nombreuses spécifications DOM et HTML du W3C est offerte par JSDOM. Cela vous permet d'utiliser des API DOM bien connues pour manipuler de manière programmée des documents HTML et XML.

Environnement semblable à un navigateur

Parce que JSDOM imite un environnement navigateur dans Node.js, vous pouvez manipuler des pages HTML de la même manière que vous le feriez si JavaScript était exécuté dans un navigateur. Cela inclut travailler avec le modèle d'objet de document, gérer les événements, exécuter des scripts et accéder à des éléments et les modifier.

Soutien des normes

Les normes web modernes, y compris HTML5, CSS3 et les nouvelles fonctionnalités JavaScript, sont prises en charge. Cela garantit la compatibilité avec la majorité du contenu web et rend possible la manipulation et l'analyse précises de pages complexes.

Analyse et Sérialisation

Les chaînes HTML peuvent être analysées par JSDOM en structures DOM, et les nœuds DOM peuvent être sérialisés en chaînes HTML. Cela permet d'exécuter des scripts à l'intérieur de la page et de modifier le contenu HTML pour fournir une sortie HTML mise à jour.

Configuration personnalisable

JSDOM peut être configuré pour imiter de nombreuses fonctionnalités liées au navigateur, y compris le traitement des ressources externes (comme le chargement de scripts ou de feuilles de style externes), le passage entre différents moteurs JavaScript (comme V8 ou SpiderMonkey), et plus encore.

Intégration avec les frameworks de test

JSDOM est un outil populaire pour rédiger des tests unitaires et des tests d'intégration, y compris la manipulation du DOM, dans des frameworks de tests comme Jest et Mocha. Il permet de tester des applications web de manière sans tête, sans nécessiter tout un environnement de navigateur.

Accessibilité et compatibilité

Il convient aux applications qui doivent se conformer aux normes d'accessibilité, car il présente des fonctionnalités d'accessibilité telles que la compatibilité avec les lecteurs d'écran et le support des propriétés ARIA.

Intégration dans l'écosystème Node.js

JSDOM fonctionne bien avec d'autres bibliothèques et l'écosystème plus large de Node.js. Il peut être utilisé, par exemple, avec des packages comme Puppeteer pour des activités de web scraping et d'automatisation plus complexes, ou avec Cheerio pour l'analyse efficace du HTML.

Créer et configurer JSDOM Node.js

Les étapes ci-dessous peuvent être utilisées pour construire et configurer JSDOM dans une application Node.js :

Installer JSDOM

Tout d'abord, assurez-vous que npm et Node.js sont installés sur votre ordinateur. npm peut être utilisé pour installer JSDOM :

npm install jsdom
npm install jsdom
SHELL

Utilisation basique de JSDOM

Ceci est un simple exemple de mise en place d'un environnement JSDOM et de travail avec un document HTML :

const { JSDOM } = require('jsdom');

// Example HTML content
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
  <title>JSDOM Example</title>
</head>
<body>
  <div id="content">
    <p>Hello, JSDOM!</p>
  </div>
</body>
</html>
`;

// Create a JSDOM instance
const dom = new JSDOM(htmlContent);

// Access and manipulate the DOM
const document = dom.window.document;
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<p>Hello, modified JSDOM!</p>';

// Serialize the modified DOM back to HTML
const modifiedHtml = dom.serialize();
console.log(modifiedHtml);
const { JSDOM } = require('jsdom');

// Example HTML content
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
  <title>JSDOM Example</title>
</head>
<body>
  <div id="content">
    <p>Hello, JSDOM!</p>
  </div>
</body>
</html>
`;

// Create a JSDOM instance
const dom = new JSDOM(htmlContent);

// Access and manipulate the DOM
const document = dom.window.document;
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<p>Hello, modified JSDOM!</p>';

// Serialize the modified DOM back to HTML
const modifiedHtml = dom.serialize();
console.log(modifiedHtml);
JAVASCRIPT

JSDOM NPM (Comment ça fonctionne pour les développeurs): Figure 2

Options de configuration

Le constructeur JSDOM accepte des options que vous pouvez fournir pour personnaliser différentes parties de sa fonctionnalité. Ce sont quelques choix de configuration typiques :

Il régule comment les scripts et les feuilles de style provenant de ressources externes doivent être chargés par l’API de l’objet JSDOM. Décidez si les scripts dans le HTML analysé doivent être exécutés par JSDOM. Permet aux scripts exécutant à l'intérieur de JSDOM de capturer leur sortie console. Imite l'environnement visuel d'un navigateur, ce qui pourrait avoir un impact sur plusieurs calculs CSS et de mise en page.

Voici une illustration de configuration du code JSDOM utilisant des options.

const { JSDOM } = require('jsdom');

const htmlContent = '<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>';

const options = {
  resources: 'usable', // Load external resources (e.g., scripts, stylesheets)
  runScripts: 'dangerously', // Allow scripts to run
};

const dom = new JSDOM(htmlContent, options);

// Access the document and window objects
const document = dom.window.document;
const window = dom.window;

// Manipulate the DOM or interact with the window object here
console.log(document.documentElement.outerHTML); // Output the modified HTML
const { JSDOM } = require('jsdom');

const htmlContent = '<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>';

const options = {
  resources: 'usable', // Load external resources (e.g., scripts, stylesheets)
  runScripts: 'dangerously', // Allow scripts to run
};

const dom = new JSDOM(htmlContent, options);

// Access the document and window objects
const document = dom.window.document;
const window = dom.window;

// Manipulate the DOM or interact with the window object here
console.log(document.documentElement.outerHTML); // Output the modified HTML
JAVASCRIPT

Utilisation avancée

Dans des situations plus compliquées, telles que la connexion de code de test avec des frameworks de test ou l'émulation des interactions utilisateur, JSDOM peut également être appliqué. Voici une illustration de l'utilisation de JSDOM et Jest pour les tests :

const { JSDOM } = require('jsdom');

test('modifying DOM with JSDOM', () => {
  const dom = new JSDOM('<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>');
  const document = dom.window.document;
  const contentParagraph = document.querySelector('p');

  // Assert initial content
  expect(contentParagraph.textContent).toBe('Hello, JSDOM!');

  // Modify content
  contentParagraph.textContent = 'Hello, modified JSDOM!';

  // Assert modified content
  expect(contentParagraph.textContent).toBe('Hello, modified JSDOM!');
});
const { JSDOM } = require('jsdom');

test('modifying DOM with JSDOM', () => {
  const dom = new JSDOM('<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>');
  const document = dom.window.document;
  const contentParagraph = document.querySelector('p');

  // Assert initial content
  expect(contentParagraph.textContent).toBe('Hello, JSDOM!');

  // Modify content
  contentParagraph.textContent = 'Hello, modified JSDOM!';

  // Assert modified content
  expect(contentParagraph.textContent).toBe('Hello, modified JSDOM!');
});
JAVASCRIPT

Démarrage

Faire fonctionner IronPDF et JSDOM dans Node.js implique de combiner ces bibliothèques pour convertir du contenu HTML en documents PDF. JSDOM vous permet de travailler avec des documents HTML de manière programmée, tandis que IronPDF facilite la conversion HTML en PDF. Voici un guide pour vous aider à démarrer.

Qu'est-ce que IronPDF pour Node.js ?

IronPDF pour Node.js produit des documents PDF de qualité supérieure à partir de texte HTML. Tout en préservant l'intégrité du contenu web original, il simplifie le processus de conversion de HTML, CSS et JavaScript en PDFs totalement formatés. Les applications web qui doivent générer des documents dynamiques et imprimables tels que des rapports, des factures et des certifications peuvent trouver cet outil particulièrement utile.

Parmi les nombreuses capacités qu'offre IronPDF, on trouve les paramètres de page ajustables, les en-têtes, les pieds de page, et la possibilité d'intégrer des images et des polices. Afin de garantir que les PDFs générés respectent le design prévu, il permet des mises en page et des styles élaborés. De plus, IronPDF gère l'exécution de JavaScript à l'intérieur de HTML, permettant un rendu précis de matériel dynamique et interactif.

JSDOM NPM (Comment ça fonctionne pour les développeurs): Figure 3

Caractéristiques de IronPDF

Génération de PDF à partir de HTML

Convertissez JavaScript, HTML et CSS en PDF. Prend en charge les requêtes média et le design réactif, deux normes web contemporaines. Utile pour décorer dynamiquement des documents PDF, rapports et factures à l'aide de HTML et CSS.

Édition de PDF

Les PDFs préexistants peuvent avoir du texte, des images et d'autres contenus ajoutés à eux, ou alternativement, vous pouvez extraire du texte et des images de ces fichiers PDF. Combine plusieurs PDF en un seul fichier. Divise les fichiers PDF en plusieurs documents distincts. Ajoutez des filigranes, des annotations, des en-têtes et des pieds de page.

Performance et Fiabilité

La haute performance et la fiabilité sont des qualités de conception souhaitées dans les environnements industriels. IronPDF gère facilement les grands ensembles de documents.

Installer IronPDF

Installez le package IronPDF pour obtenir les outils nécessaires pour travailler avec les PDFs dans des projets de nœud.

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

Convertir HTML en PDF en utilisant JSDOM et IronPDF

Préparez le matériel HTML pour le convertir en PDF. À titre d'illustration :

<!-- example.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .content {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Hello, JSDOM with IronPDF!</h1>
    <p>This is a sample HTML document converted to PDF using JSDOM and IronPDF.</p>
  </div>
</body>
</html>
<!-- example.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .content {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Hello, JSDOM with IronPDF!</h1>
    <p>This is a sample HTML document converted to PDF using JSDOM and IronPDF.</p>
  </div>
</body>
</html>
HTML

Créez un script Node.js appelé convertToPdf.js qui analyse le contenu HTML en utilisant JSDOM et crée un PDF en utilisant IronPDF.

const { JSDOM } = require('jsdom');
const IronPdf = require("@ironsoftware/ironpdf");
const fs = require('fs');

// Configure IronPDF with the license key (if applicable)
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({ licenseKey: '' });

// Load the HTML content from the file
const htmlContent = fs.readFileSync('example.html', 'utf8');

// Create a JSDOM instance and parse the HTML
const dom = new JSDOM(htmlContent);
const jdocument = dom.window.document;

// Convert the HTML to PDF
IronPdf.PdfDocument.fromHtml(jdocument.documentElement.outerHTML).then((pdfres) => {
  const filePath = `${Date.now()}.pdf`;
  pdfres.saveAs(filePath).then(() => {
    console.log('PDF saved successfully!');
  }).catch((e) => {
    console.log(e);
  });
});
const { JSDOM } = require('jsdom');
const IronPdf = require("@ironsoftware/ironpdf");
const fs = require('fs');

// Configure IronPDF with the license key (if applicable)
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({ licenseKey: '' });

// Load the HTML content from the file
const htmlContent = fs.readFileSync('example.html', 'utf8');

// Create a JSDOM instance and parse the HTML
const dom = new JSDOM(htmlContent);
const jdocument = dom.window.document;

// Convert the HTML to PDF
IronPdf.PdfDocument.fromHtml(jdocument.documentElement.outerHTML).then((pdfres) => {
  const filePath = `${Date.now()}.pdf`;
  pdfres.saveAs(filePath).then(() => {
    console.log('PDF saved successfully!');
  }).catch((e) => {
    console.log(e);
  });
});
JAVASCRIPT

JSDOM NPM (Comment ça fonctionne pour les développeurs): Figure 4

Chargez le contenu HTML à partir d'une base de données, d'un fichier ou d'un contenu généré dynamiquement. Pour créer un document PDF à partir du contenu HTML analysé, utilisez IronPDF. La chaîne HTML est acceptée par la fonction RenderHtmlAsPdf d'IronPDF, qui délivre ensuite une promesse avec les données PDF. Utilisant le module système de fichiers (fs) de Node.js, IronPDF crée le document PDF comme un tampon (pdfBuffer), qui peut être enregistré dans un fichier. La gestion des erreurs garantit la résilience en cas de problèmes, comme un HTML corrompu ou des difficultés de réseau, pendant la création de PDFs.

JSDOM NPM (Comment ça fonctionne pour les développeurs): Figure 5

Conclusion

Pour créer de manière programmée des documents PDF de haute qualité à partir d'un contenu HTML, JSDOM offre une option fiable. Avec JSDOM, les développeurs peuvent interagir avec les éléments du DOM et modifier dynamiquement le contenu en simplifiant l'analyse et la manipulation de pages HTML dans un environnement de navigateur simulé. Cette fonctionnalité est essentielle pour des tâches telles que l'extraction de données, la génération de rapports dynamiques et l'extraction de données web.

Avec ses capacités robustes pour transformer des textes HTML en PDFs qui vous donnent un contrôle précis sur la mise en page, la pagination, les en-têtes, les pieds de page et d'autres fonctionnalités spécifiques aux PDFs, IronPDF est une excellente addition à JSDOM. Il facilite la conversion de structures HTML complexes depuis des applications Node.js directement en fichiers PDF imprimables et prêts.

La combinaison de JSDOM et IronPDF permet aux développeurs de créer des documents PDF à partir de modèles HTML ou d'informations générées dynamiquement de manière automatique. Cela rend les documents utiles pour une variété de cas d'utilisation, tels que la production de rapports, de certificats, de factures, et plus encore. Cette intégration répond efficacement aux exigences uniques des applications centrées sur les documents au sein de l'écosystème Node.js en utilisant les forces des deux bibliothèques pour améliorer la productivité et préserver la fidélité des documents.

IronPDF et Iron Software vous permettent d'étendre les capacités de votre boîte à outils de développement .NET avec OCR, numérisation de codes-barres, création de PDFs, intégration Excel, et d'autres fonctionnalités. IronPDF combines Iron Software avec son support principal pour fournir aux développeurs des applications en ligne supplémentaires et des fonctionnalités, ainsi qu'un développement plus efficace, le tout pour seulement $799 pour l'édition de base.

Lorsque les options de licence sont claires et adaptées au projet, les développeurs peuvent sélectionner le modèle optimal avec plus de facilité. Ces fonctionnalités aident les développeurs à résoudre une large gamme de problèmes de manière simple, efficace et bien intégrée.

Darrius Serrant
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite