Prettier - NPM (Comment ça marche pour les développeurs)

Installation

Pour commencer à utiliser Prettier dans vos projets, vous pouvez l'installer via NPM ou yarn :

npm install prettier --save-dev

npm install prettier --save-dev

or

yarn add --dev prettier

yarn add --dev prettier

Utilisation

• Interface de ligne de commande (CLI) : Prettier fournit un outil CLI pour formater manuellement les fichiers ou les intégrer dans des scripts pour des tâches de formatage automatisées.
• Intégration avec les éditeurs : des plugins sont disponibles pour les éditeurs populaires tels que Visual Studio Code, Sublime Text, Atom et autres, permettant une mise en forme en temps réel pendant la saisie.
• Git Hooks : configurez Prettier pour qu'il s'exécute avant les commits à l'aide de Git Hooks afin de garantir que toutes les modifications de code respectent les règles de formatage définies.

Intégrations et écosystème

Prettier s'intègre parfaitement avec divers outils de développement et flux de travail :

• Plugins IDE : s'intègrent aux IDE et aux éditeurs de texte pour formater le code à la volée, améliorant ainsi la productivité des développeurs et le respect des normes de codage.
• Systèmes de construction : Intégrés aux pipelines de construction et aux flux de travail d'intégration continue (CI) pour garantir un formatage de code cohérent dans tous les projets d'équipe.
• Gestion des versions : Fonctionne harmonieusement avec les systèmes de gestion des versions comme Git, garantissant ainsi le maintien d'un code formaté de manière cohérente tout au long de la collaboration.

Conversion HTML en PDF

Convertissez le contenu HTML en documents PDF en toute simplicité. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.

Conversion d'URL en PDF

Générez des PDF directement à partir d'URL, vous permettant de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.

Manipulation de PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF propose des fonctionnalités telles que l'ajout de pages, la division de documents, et plus.

Sécurité des PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre l'accès non autorisé.

Sortie de Haute Qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.

Intégration Simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui facilite l'incorporation des capacités de génération de PDF dans vos projets.

Installation

Pour installer le package NPM IronPDF, utilisez la commande suivante :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

Créer un PDF

Maintenant, créons un exemple simple de génération de PDF avec IronPDF.

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Étant donné qu'IronPDF s'exécute uniquement côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier à pages/api/pdf.js et ajoutez le contenu ci-dessous.

IronPDF nécessite une clé de licence, qui peut être obtenue depuis la page de licence et utilisée dans le code suivant.

// pages/api/pdf.js

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

// pages/api/pdf.js

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

Modifiez maintenant le code index.js pour utiliser Prettier et IronPDF comme indiqué ci-dessous.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";

export default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // Handle input changes, updating the state
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{margin: 20, padding: 5}} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";

export default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // Handle input changes, updating the state
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{margin: 20, padding: 5}} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

Formatez le code en utilisant yarn prettier :

yarn prettier . --write

yarn prettier . --write

Exécutez maintenant l'application en utilisant la commande :

yarn dev

yarn dev

Sortie

PDF