1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Aide sur les nœuds
  4. date-fns NPM
AIDE SUR LES NœUDS

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

Publié octobre 24, 2024
Partager:

Introduction

Lorsque vous travaillez avec des dates dans une application React, date-fns est une bibliothèque utilitaire JavaScript moderne, puissante et légère, qui facilite la manipulation des dates JavaScript. date-fns utilise les types de données de dates natifs existants, il n'étend pas les objets principaux par souci de sécurité, ce qui signifie qu'il évitera de modifier ou d'ajouter des fonctionnalités à ces types de données de dates intégrés, ce qui entraînerait des erreurs ou des conflits potentiels. Dans cet article, nous allons explorer comment intégrer date-fns dans votre projet React et fournir quelques exemples pratiques.

Pourquoi date-fns ?

date-fns offre plusieurs avantages :

  • Modulaire : Vous pouvez importer uniquement les fonctions dont vous avez besoin, ce qui réduit la taille du paquet.
  • Immuable : Il est construit à l'aide de fonctions pures et ces fonctions ne modifient donc pas les objets date d'origine.
  • Complet : Fournit un large éventail de fonctions pour la manipulation et le formatage des dates.
  • Internationalisation : Prise en charge de plusieurs langues.

Pour commencer

Tout d'abord, installez le paquet date-fns npm via npm :

npm install date-fns
or
yarn add date-fns
npm install date-fns
or
yarn add date-fns
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @date-fns @or yarn add @date-fns
VB   C#

Formatage des dates

L'une des tâches les plus courantes est le formatage des dates, date-fns utilise . Créons un composant simple qui affiche la date actuelle dans votre fuseau horaire dans un format lisible.

import React from 'react';
import { format } from 'date-fns';
const FormattedDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default FormattedDate;
import React from 'react';
import { format } from 'date-fns';
const FormattedDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default FormattedDate;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { format } from '@date-fns'; const FormattedDate = () => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default FormattedDate;
VB   C#

Sortie

date-fns NPM(Comment ça marche pour les développeurs) : Figure 1

Dates d'analyse

Vous pouvez également analyser des dates à partir de chaînes de caractères. Voici un exemple d'analyse d'une chaîne de dates et de son affichage dans un format différent :

import React from 'react';
import { parse, format } from 'date-fns';
const ParsedDate = () => {
  const dateString = '2024-06-23';
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
  const formattedDate = format(parsedDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default ParsedDate;
import React from 'react';
import { parse, format } from 'date-fns';
const ParsedDate = () => {
  const dateString = '2024-06-23';
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
  const formattedDate = format(parsedDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default ParsedDate;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { parse, format } from '@date-fns'; const ParsedDate = () => { const dateString = '2024-06-23'; const parsedDate = parse(dateString, 'yyyy-MM-dd', New @Date()); const formattedDate = format(parsedDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default ParsedDate;
VB   C#

Sortie

date-fns NPM(Comment ça marche pour les développeurs) : Figure 2

Addition et soustraction de dates

date-fns permet d'ajouter ou de soustraire facilement du temps aux dates. Voici un exemple d'ajout de 7 jours à la date actuelle :

import React from 'react';
import { addDays, format } from 'date-fns';
const AddDaysExample = () => {
  const currentDate = new Date();
  const futureDate = addDays(currentDate, 7);
  const formattedDate = format(futureDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default AddDaysExample;
import React from 'react';
import { addDays, format } from 'date-fns';
const AddDaysExample = () => {
  const currentDate = new Date();
  const futureDate = addDays(currentDate, 7);
  const formattedDate = format(futureDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default AddDaysExample;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { addDays, format } from '@date-fns'; const AddDaysExample = () => { const currentDate = New @Date(); const futureDate = addDays(currentDate, 7); const formattedDate = format(futureDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default AddDaysExample;
VB   C#

Sortie

date-fns NPM(Comment ça marche pour les développeurs) : Figure 3

Internationalisation

date-fns prend en charge plusieurs locales. Pour utiliser un local spécifique, vous devez l'importer et le transmettre à la fonction de formatage :

import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
const FrenchDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr });
  return <p>{formattedDate}</p>;
};
export default FrenchDate;
import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
const FrenchDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr });
  return <p>{formattedDate}</p>;
};
export default FrenchDate;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { format } from '@date-fns'; import { fr } from '@date-fns/locale'; const FrenchDate = () => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr }); Return <p>{formattedDate}</p>; }; export default FrenchDate;
VB   C#

Sortie

date-fns NPM(Comment ça marche pour les développeurs) : Figure 4

Présentation d'IronPDF

IronPDF est une puissante bibliothèque PDF Node.js qui permet aux développeurs de générer et d'éditer des PDF dans leurs projets node.js. Que vous ayez besoin de créer des PDF à partir de HTML, de manipuler des PDF existants ou de convertir des pages web au format PDF, IronPDF a tout prévu.

date-fns NPM(Comment ça marche pour les développeurs) : Figure 5 - IronPDF for Node.js : The Node.js PDF Library (en anglais)

Caractéristiques principales

Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

Conversion d'URL en PDF

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

Manipulation des PDF

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

Sécurité 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 les accès non autorisés.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDFest compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Installation

Pour installer leIronPDF Pour créer un paquet NPM, utilisez la commande suivante :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Générer un document PDF à l'aide d'IronPDF et utiliser des datagrammes

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait) à l'aide de la commande suivante : Référerici

npx create-next-app@latest date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest @date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
VB   C#

Ensuite, accédez au répertoire de votre projet :

cd date-pdf
cd date-pdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd @date-pdf
VB   C#

Installez les paquets nécessaires :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add date-fns
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add date-fns
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64 yarn add @date-fns
VB   C#

Créer un PDF

Maintenant, créons un exemple simple de génération d'un PDF en utilisant IronPDF. Dans votre composant Next.js(par exemple, pages/index.tsx)ajoutez le code suivant :

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 ne fonctionne que côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous.

Une clé de licence est nécessaire pour IronPDF , vous pouvez l'obtenir à partir de l'adresse suivantepage de licence et le placer dans le code ci-dessous.

// 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 currentDate = new Date(); // javascript dates
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>Date:"+currentDate+"</p>";
    content+="<p>Formatted Date:"+formattedDate+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    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 currentDate = new Date(); // javascript dates
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>Date:"+currentDate+"</p>";
    content+="<p>Formatted Date:"+formattedDate+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    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
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'export default async @function handler(req, res)
'{
'  try
'  {
'	const currentDate = New @Date(); ' javascript dates
'	const formattedDate = format(currentDate, 'MMMM do, yyyy');
'	let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>" content+="<p>Date:"+currentDate+"</p>";
'	content+="<p>Formatted Date:"+formattedDate+"</p>";
'	const pdf = await PdfDocument.fromHtml(content);
'	const data = await pdf.saveAsBuffer();
'	console.@error("data PDF:", data);
'	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();
'  }
'}
}
VB   C#

Modifiez maintenant le fichier index.js et ajoutez le code suivant

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from 'date-fns';
export default function Home() {
  const [text, setText] = useState("");
  useEffect(() => {
    const currentDate = new Date(); // new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + 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);
    }
  };  
  const handleChange = (event) => {
    seteText(hashids.encode(event.target.value));
    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 Date-fns and Generate PDF Using IronPDF</h1>     
        <p>
          Formatted Data: {text}
        </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;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</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, useEffect } from "react";
import { format } from 'date-fns';
export default function Home() {
  const [text, setText] = useState("");
  useEffect(() => {
    const currentDate = new Date(); // new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + 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);
    }
  };  
  const handleChange = (event) => {
    seteText(hashids.encode(event.target.value));
    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 Date-fns and Generate PDF Using IronPDF</h1>     
        <p>
          Formatted Data: {text}
        </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;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</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>
  );
}
Private Head As import
Private styles As import
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useState, useEffect
End If
from "react"
import
If True Then
	format
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from '@date-fns'; export default @function Home() { const [text, setText] = useState(""); useEffect(() => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy'); setText(formattedDate); }, []); const generatePdf = async() => { try { const response = await fetch("/api/pdf-datefns?f=" + 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); } }; const handleChange = (event) => { seteText(hashids.encode(event.target.value)); 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 @Date-fns @and Generate PDF @Using IronPDF</h1> <p> Formatted Data: {text} </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; } footer { width: 100%; height: 100px; border-top: 1px solid #eaeaea; display: flex; justify-content: center; align-items: center; } footer img { margin-left: 0.5rem; } footer a { display: flex; justify-content: center; align-items: center; text-decoration: none; color: inherit; } code { background: #fafafa; border-radius: 5px; padding: 0.75rem; font-size: 1.1rem; font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier @New, monospace; } `}</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>); }
VB   C#

Sortie

date-fns NPM(Comment ça marche pour les développeurs) : Figure 6

PDF (EN ANGLAIS)

date-fns NPM(Comment ça marche pour les développeurs) : Figure 7

Licence d'IronPDF

IronPDF.

Placez la clé de licence ici :

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Conclusion

date-fns est une bibliothèque polyvalente et efficace qui fournit un ensemble d'outils puissants, mais simples et cohérents pour gérer les dates dans les applications React. Son approche modulaire vous permet d'inclure uniquement ce dont vous avez besoin en termes de fonctions nécessaires, ce qui réduit la taille de votre pack. Avec une prise en charge complète de la manipulation et du formatage des dates, date-fns peut considérablement améliorer vos projets React.

IronPDF for Node.js est une bibliothèque robuste qui permet aux développeurs de générer, de manipuler et de travailler de manière transparente avec des documents PDF de manière programmatique. Que vous ayez besoin de convertir du HTML, des URL ou d'autres formats en PDF, IronPDF propose des API simples pour accomplir ces tâches efficacement. Ses capacités s'étendent à la gestion des formulaires PDF, à l'application de mesures de sécurité, à la reconnaissance optique de caractères, etc.

< PRÉCÉDENT
memcached npm (Comment ça marche pour les développeurs)
SUIVANT >
express validator npm (Comment ça fonctionne pour les développeurs)

Installer avec npm

Version :2024.11

> npm i @ironsoftware/ironpdf

Signaler un problème

Prêt à commencer ? Version : 2024.11 vient de paraître

Installation gratuite de npm Voir les licences > ;