Przejdź do treści stopki
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Pomoc Node
  4. date-fns NPM
POMOC NODE

NPM date-fns (Jak działa dla deweloperów)

Darrius Serrant
Darrius Serrant
Zaktualizowano:

Podczas pracy z datami w aplikacji React, date-fns jest potężną i lekką, nowoczesną biblioteką narzędzi JavaScript do obsługi dat, która sprawia, że manipulowanie datami w JavaScript staje się dziecinnie proste. date-fns wykorzystuje istniejące natywne typy danych daty i ze względów bezpieczeństwa nie rozszerza obiektów podstawowych, co oznacza, że unika modyfikowania lub dodawania funkcji do tych wbudowanych typów danych daty, co mogłoby prowadzić do potencjalnych błędów lub konfliktów. W tym artykule omówimy, jak zintegrować date-fns z projektem React, i podamy kilka praktycznych przykładów.

Dlaczego date-fns?

date-fns oferuje kilka zalet:

  • Modułowość: Możesz zaimportować tylko te funkcje, których potrzebujesz, zmniejszając rozmiar pakietu.
  • Niezmienna: Została zbudowana przy użyciu funkcji czystych, więc funkcje te nie zmieniają oryginalnych obiektów danych.
  • Kompleksowy: zapewnia szeroki zakres funkcji do manipulacji danymi i formatowania dat.
  • Internacjonalizacja: Obsługuje wiele ustawień regionalnych.

Pierwsze kroki

Najpierw zainstaluj pakiet date-fns npm za pomocą npm:

npm install date-fns
# or
yarn add date-fns
npm install date-fns
# or
yarn add date-fns
SHELL

Formatowanie dat

Jednym z najczęstszych zadań jest formatowanie dat za pomocą date-fns. Stwórzmy prosty komponent, który wyświetla aktualną datę w Twojej strefie czasowej w czytelnym formacie.

import React from 'react';
import { format } from 'date-fns';

// A functional component to format the current date using date-fns
const FormattedDate = () => {
  const currentDate = new Date(); // Get current date
  const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format date as "Month day, year"
  return <p>{formattedDate}</p>; // Render formatted date in a paragraph
};

export default FormattedDate;
import React from 'react';
import { format } from 'date-fns';

// A functional component to format the current date using date-fns
const FormattedDate = () => {
  const currentDate = new Date(); // Get current date
  const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format date as "Month day, year"
  return <p>{formattedDate}</p>; // Render formatted date in a paragraph
};

export default FormattedDate;
JAVASCRIPT

Wynik

date-fns NPM (Jak to działa dla programistów): Rysunek 1

Analiza dat

Można również analizować daty z ciągów znaków. Oto przykład analizowania ciągu znaków daty i wyświetlania go w innym formacie:

import React from 'react';
import { parse, format } from 'date-fns';

// A functional component to parse and format a date string
const ParsedDate = () => {
  const dateString = '2024-06-23'; // Define a date string
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date()); // Parse date string into a JavaScript Date object
  const formattedDate = format(parsedDate, 'MMMM do, yyyy'); // Format parsed date
  return <p>{formattedDate}</p>; // Render formatted date
};

export default ParsedDate;
import React from 'react';
import { parse, format } from 'date-fns';

// A functional component to parse and format a date string
const ParsedDate = () => {
  const dateString = '2024-06-23'; // Define a date string
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date()); // Parse date string into a JavaScript Date object
  const formattedDate = format(parsedDate, 'MMMM do, yyyy'); // Format parsed date
  return <p>{formattedDate}</p>; // Render formatted date
};

export default ParsedDate;
JAVASCRIPT

Wynik

date-fns NPM (Jak to działa dla programistów): Rysunek 2

Dodawanie i odejmowanie dat

date-fns ułatwia dodawanie lub odejmowanie czasu od dat. Oto przykład dodania 7 dni do bieżącej daty:

import React from 'react';
import { addDays, format } from 'date-fns';

// A functional component to add days to the current date and format it
const AddDaysExample = () => {
  const currentDate = new Date(); // Current date
  const futureDate = addDays(currentDate, 7); // Add 7 days to the current date
  const formattedDate = format(futureDate, 'MMMM do, yyyy'); // Format the new date
  return <p>{formattedDate}</p>; // Render formatted date
};

export default AddDaysExample;
import React from 'react';
import { addDays, format } from 'date-fns';

// A functional component to add days to the current date and format it
const AddDaysExample = () => {
  const currentDate = new Date(); // Current date
  const futureDate = addDays(currentDate, 7); // Add 7 days to the current date
  const formattedDate = format(futureDate, 'MMMM do, yyyy'); // Format the new date
  return <p>{formattedDate}</p>; // Render formatted date
};

export default AddDaysExample;
JAVASCRIPT

Wynik

date-fns NPM (Jak to działa dla programistów): Rysunek 3

Internacjonalizacja

date-fns obsługuje wiele ustawień regionalnych. Aby użyć konkretnego ustawienia regionalnego, należy je zaimportować i przekazać do funkcji formatującej:

import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';

// A functional component to format the current date using a specific locale
const FrenchDate = () => {
  const currentDate = new Date(); // Current date
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr }); // Format date in French locale
  return <p>{formattedDate}</p>; // Render formatted date
};

export default FrenchDate;
import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';

// A functional component to format the current date using a specific locale
const FrenchDate = () => {
  const currentDate = new Date(); // Current date
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr }); // Format date in French locale
  return <p>{formattedDate}</p>; // Render formatted date
};

export default FrenchDate;
JAVASCRIPT

Wynik

date-fns NPM (Jak to działa dla programistów): Rysunek 4

Przedstawiamy IronPDF

IronPDF for Node.js to potężna biblioteka PDF dla Node.js, która pozwala programistom generować i edytować pliki PDF w ich projektach Node.js. Niezależnie od tego, czy chcesz tworzyć pliki PDF z HTML, edytować istniejące pliki PDF, czy konwertować strony internetowe do formatu PDF, IronPDF spełni Twoje oczekiwania.

date-fns NPM (Jak to działa dla programistów): Rysunek 5 – IronPDF for Node.js: biblioteka PDF dla Node.js

Najważniejsze cechy

Konwersja HTML do PDF

Z łatwością konwertuj treści HTML na dokumenty PDF. Ta funkcja jest szczególnie przydatna do generowania dynamicznych plików PDF na podstawie treści internetowych.

Konwersja adresów URL do formatu PDF

Generuj pliki PDF bezpośrednio z adresów URL, co pozwala na przechwytywanie treści stron internetowych i zapisywanie ich jako pliki PDF za pomocą kodu.

Manipulacja plikami PDF

Z łatwością scalaj, dziel i edytuj istniejące dokumenty PDF. IronPDF oferuje takie funkcje, jak dodawanie stron, dzielenie dokumentów i wiele innych.

Zabezpieczenia plików PDF

Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe. IronPDF oferuje opcje ochrony poufnych dokumentów przed nieuprawnionym dostępem.

Wysoka jakość tłumaczenia

Tworzenie wysokiej jakości dokumentów PDF z precyzyjnym renderowaniem tekstu, obrazów i formatowania. IronPDF gwarantuje, że wygenerowane pliki PDF zachowują wierność oryginalnej treści.

Kompatybilność międzyplatformowa

IronPDF jest kompatybilny z różnymi platformami, w tym Windows, Linux i macOS, dzięki czemu nadaje się do szerokiego zakresu środowisk programistycznych.

Prosta integracja

Z łatwością zintegruj IronPDF ze swoimi aplikacjami Node.js, korzystając z pakietu npm. API jest dobrze udokumentowane, co ułatwia włączenie funkcji generowania plików PDF do projektów.

Instalacja

Aby zainstalować pakiet IronPDF NPM, użyj następującego polecenia:

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

Generowanie dokumentu PDF przy użyciu IronPDF i biblioteki date-fns

Zainstaluj zależności: Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś) za pomocą następującego polecenia: Zobacz tutaj

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"
SHELL

Następnie przejdź do katalogu projektu:

cd date-pdf
cd date-pdf
SHELL

Zainstaluj wymagane pakiety:

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
SHELL

Utwórz plik PDF

Teraz stwórzmy prosty przykład generowania pliku PDF przy użyciu IronPDF. W komponencie Next.js (np. pages/index.tsx) dodaj następujący kod:

API do generowania plików PDF: Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentów PDF. Ponieważ IronPDF działa wyłącznie po stronie serwera, musimy stworzyć interfejs API, który będzie wywoływany, gdy użytkownik zechce wygenerować plik PDF. Utwórz plik w ścieżce pages/api/pdf.js i dodaj poniższą treść.

Do działania IronPDF wymagany jest klucz licencyjny, który można pobrać ze strony licencji i umieścić w poniższym kodzie.

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
import { format } from 'date-fns';

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const currentDate = new Date(); // Get the current date
    const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format the date
    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); // Generate PDF from HTML content
    const data = await pdf.saveAsBuffer(); // Save as buffer
    console.error("data PDF:", data); // Log the PDF data
    res.setHeader("Content-Type", "application/pdf"); // Set response headers
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data); // Send PDF data as response
  } catch (error) {
    console.error("Error generating PDF:", error); // Log errors
    res.status(500).end(); // End response on error
  }
}
// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
import { format } from 'date-fns';

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const currentDate = new Date(); // Get the current date
    const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format the date
    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); // Generate PDF from HTML content
    const data = await pdf.saveAsBuffer(); // Save as buffer
    console.error("data PDF:", data); // Log the PDF data
    res.setHeader("Content-Type", "application/pdf"); // Set response headers
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data); // Send PDF data as response
  } catch (error) {
    console.error("Error generating PDF:", error); // Log errors
    res.status(500).end(); // End response on error
  }
}
JAVASCRIPT

Teraz zmodyfikuj index.js i dodaj poniższy kod:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from 'date-fns';

// React component for the home page
export default function Home() {
  const [text, setText] = useState("");

  useEffect(() => {
    const currentDate = new Date(); // Get a new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format the date
    setText(formattedDate); // Set formatted date to state
  }, []);

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text); // Fetch the PDF from API
      const blob = await response.blob(); // Convert to blob
      const url = window.URL.createObjectURL(new Blob([blob])); // Create URL for download
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf"); // Set download attribute
      document.body.appendChild(link);
      link.click(); // Simulate click to download
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error); // Log errors
    }
  };

  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';

// React component for the home page
export default function Home() {
  const [text, setText] = useState("");

  useEffect(() => {
    const currentDate = new Date(); // Get a new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy'); // Format the date
    setText(formattedDate); // Set formatted date to state
  }, []);

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text); // Fetch the PDF from API
      const blob = await response.blob(); // Convert to blob
      const url = window.URL.createObjectURL(new Blob([blob])); // Create URL for download
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf"); // Set download attribute
      document.body.appendChild(link);
      link.click(); // Simulate click to download
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error); // Log errors
    }
  };

  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>
  );
}
JAVASCRIPT

Wynik

date-fns NPM (Jak to działa dla programistów): Rysunek 6

PDF

date-fns NPM (Jak to działa dla programistów): Rysunek 7

Licencja IronPDF

IronPDF.

Umieść tutaj klucz licencyjny:

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

Wnioski

date-fns to wszechstronna i wydajna biblioteka, która zapewnia potężny, a jednocześnie prosty i spójny zestaw narzędzi do obsługi dat w aplikacjach React. Modułowe podejście pozwala na włączenie tylko tych funkcji, które są niezbędne, dzięki czemu rozmiar pakietu pozostaje niewielki. Dzięki kompleksowej obsłudze manipulacji i formatowania dat date-fns może znacznie usprawnić Twoje projekty React.

IronPDF for Node.js to solidna biblioteka, która umożliwia programistom płynne generowanie, modyfikowanie i pracę z dokumentami PDF za pomocą kodu. Niezależnie od tego, czy chcesz konwertować HTML, adresy URL czy inne formaty na pliki PDF, IronPDF oferuje proste interfejsy API, które pozwalają sprawnie wykonać te zadania. Jego możliwości obejmują obsługę formularzy PDF, stosowanie środków bezpieczeństwa, wykonywanie OCR i wiele innych.

Darrius Serrant
Darrius Serrant
  Czat z zespołem inżynierów teraz
Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie