1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. date-fns NPM
節點幫助

date-fns NPM（開發人員如何操作）

發佈 2024年10月24日
分享:

介紹

在 React 應用程式中處理日期時，date-fns 是一個功能強大且輕量的現代 JavaScript 日期工具庫，使操作 JavaScript 日期變得輕而易舉。 date-fns 使用現有的原生日期數據類型，出於安全考量，它不會擴展核心對象，這意味著它將避免修改或增加那些內建日期數據類型的功能，以免引起潛在的錯誤或衝突。 在本文中，我們將探討如何將 date-fns 整合到您的 React 專案中並提供一些實用範例。

為什麼選擇date-fns？

date-fns提供了幾個優點：

  • 模組化：您可以僅匯入所需的功能，從而降低封裝大小。
  • Immutable：它是使用純函式構建的，因此這些函式不會改變原始日期物件。
  • 全面：提供廣泛的日期操作和格式化功能。
  • 國際化：支持多個地區設定。

入門

首先，通過 npm 安裝 date-fns 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#

格式化日期

其中一項最常見的任務是格式化日期，date-fns 使用。 讓我們創建一個簡單的組件，以易讀的格式顯示您時區的當前日期。

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#

輸出

date-fns NPM（開發者如何使用）：圖1

解析日期

您也可以從字串中解析日期。 以下是一個解析日期字串並以不同格式顯示的範例：

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#

輸出

date-fns NPM（對開發者的運作方式）：圖2

加減日期

date-fns 使從日期中添加或減去時間變得簡單。 以下是一個將當前日期增加 7 天的範例：

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#

輸出

date-fns NPM（開發者運作方式）：圖3

國際化

date-fns 支援多種語言環境。 要使用特定的區域設置，您需要導入它並將其傳遞給格式化函數：

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#

輸出

date-fns NPM（對開發者的運作方式）：圖4

介紹 IronPDF

IronPDF是一個強大的 Node.js PDF 程式庫，讓開發者能夠在他們的 Node.js 專案中生成和編輯 PDF。 無論您需要從 HTML 創建 PDF、操作現有的 PDF 還是將網頁轉換為 PDF 格式，IronPDF 都能滿足您的需求。

date-fns NPM（對開發者的運作方式）：圖 5 - IronPDF for Node.js：Node.js 的 PDF 函式庫

主要功能

HTML 轉 PDF

輕鬆將 HTML 內容轉換成 PDF 文件。 此功能特別適合從網頁內容生成動態 PDF。

URL 轉換為 PDF

直接從網址生成PDF，讓您可以程式化地捕獲網頁內容並將其保存為PDF文件。

PDF 操作

輕鬆合併、拆分和操作現有的 PDF 文件。 IronPDF 提供如附加頁面、拆分文檔等功能。

PDF 安全性

透過加密密碼或應用數位簽章來保護您的 PDF 文件。 IronPDF 提供選項來保護您的敏感文件免受未經授權的訪問。

高品質輸出

生成高品質的 PDF 文件，精確還原文字、圖像和格式。 IronPDF 確保您生成的 PDF 保持對原始內容的忠實性。

跨平台相容性

IronPDF與多個平台相容，包括 Windows、Linux 和 macOS，使其適合各種開發環境。

簡單整合

輕鬆使用其 npm 套件將 IronPDF 集成到您的 Node.js 應用程式中。 API 有完善的文檔，使將 PDF 生成功能融入您的項目變得簡單明瞭。

安裝

若要安裝IronPDFNPM 套件，使用以下命令：

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#

使用 IronPDF 生成 PDF 文件並使用 Date-Fns

安裝依賴項：首先，創建一個新的 Next.js 專案(如果您還沒有)使用以下命令：參考這裡

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#

接著，導航至您的專案目錄：

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

安裝所需的軟體包：

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#

建立 PDF

現在，讓我們創建一個使用生成 PDF 的簡單範例IronPDF. 在您的 Next.js 組件中(例如，pages/index.tsx)，新增以下代碼：

PDF 生成 API：第一步是建立一個後端 API 來生成 PDF 文件。 由於 IronPDF 只在伺服器端運行，我們需要創建一個 API 以便用戶需要生成 PDF 時進行調用。 在路徑 pages/api/pdf.js 中創建一個文件，並添加以下內容。

IronPDF需要許可證密鑰，您可以從授權頁面```html <!DOCTYPE html>

Iron Software Products

Iron Software 產品

技術和產品描述

IronPDF 是一個功能強大的.NET PDF庫，使得生成和編輯PDF文件變得簡單。無論您使用的是C#、VB.NET還是JavaScript，IronPDF都能滿足您的需求。

IronOCR 是一個領先的.NET光學字符識別庫，能夠準確地將圖像轉換為可編輯的文本。這個工具對於需要處理大量掃描文件的開發人員來說非常有用。

IronXL 提供了一個強大的Excel讀取和寫入庫，簡化了處理Excel文件的流程。無論是讀取、修改還是生成，IronXL都能夠輕鬆完成。

IronBarcode and IronQR 能夠快速生成和讀取條形碼和二維碼，適合各種應用場景。

IronZIP 是一個.NET庫，用於創建、編輯和提取ZIP文件，支持高效的文件壓縮和解壓。

IronWord 提供了一個靈活的工具來生成、編輯和閱讀Word文件。它支持所有的Word格式，使得文檔處理變得簡單和可靠。

IronPrint 是一個強大的打印庫，能夠輕鬆地從任何.NET應用程序進行打印操作。

IronWebscraper 是一個方便的工具，可以從Web頁面中提取數據，適用於數據收集和分析。

Iron Suite 包含了所有的Iron Software工具包，提供全面的解決方案，以滿足您的所有需求。


```cs
// 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();
  }
}
}

現在修改 index.js 並添加以下代碼

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#

輸出

date-fns NPM（它如何為開發者運作）：圖6

PDF

date-fns NPM（開發者如何使用）：圖 7

IronPDF 授權

IronPDF.

在此處放置授權金鑰：

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#

結論

date-fns 是一個多功能且高效的庫，為在 React 應用程式中處理日期提供了強大、簡單且一致的工具集。 其模組化方法允許您只包含所需的必要功能，保持套件大小精簡。 藉由提供全面的日期操作和格式化支持，date-fns 可以顯著提升您的 React 專案。

IronPDF for Node.js 是一個強大的函式庫，使開發人員能夠無縫地以程式化方式生成、操作和處理 PDF 文件。 無論您需要將 HTML、URL 或其他格式轉換為 PDF，IronPDF 都提供簡單的 API 來高效完成這些任務。 其功能延伸至處理 PDF 表單、應用安全措施、執行 OCR 等。

< 上一頁
memcached npm（它如何為開發人員工作）
下一個 >
express validator npm（它如何為開發者工作）

使用 npm 安裝

版本：2024.11

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

免費 npm 安裝 查看許可證 >