IRONSOFTWAREHOME
IRONSUITE所有10的价格为2
联系销售
按公司
加入我们的专家网络
NODE 帮助

date-fns NPM（开发者如何使用）

Curtis Chau
Curtis Chau
Updated: 2026年4月21日

在React应用程序中处理日期时，date-fns 是一个功能强大且轻量级的现代JavaScript日期实用程序库，使操作JavaScript日期变得轻而易举。 date-fns 使用现有的本机日期数据类型，并且为了安全起见，它不会扩展核心对象，这意味着它将避免修改或添加功能到这些内置日期数据类型，从而避免潜在的错误或冲突。 在本文中，我们将探讨如何将date-fns 集成到您的React项目中，并提供一些实用的示例。

为什么选择 date-fns？

date-fns 提供几个优势：

-**模块化：**您可以只导入所需的功能，从而减小包的大小。 -**不可变：**它是使用纯函数构建的，因此这些函数不会改变原始日期对象。 -**功能全面：**提供广泛的日期操作和格式化功能。 -**国际化：**支持多种语言环境。

开始

首先，通过npm安装date-fns npm包：

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

格式化日期

最常见的任务之一是使用date-fns 格式化日期。 让我们来创建一个简单的组件，以可读的格式显示您所在时区的当前日期。

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

输出

date-fns NPM（开发者如何使用）：图1

解析日期

您还可以从字符串中解析日期。 以下是解析日期字符串并以不同格式显示的示例：

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

输出

date-fns NPM（开发者如何使用）：图2

添加和减去日期

date-fns 使得添加或减去日期时间变得简单。 以下是将当前日期增加 7 天的示例：

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

输出

date-fns NPM（开发者如何使用）：图3

国际化

date-fns 支持多种语言环境。 要使用特定的语言环境，您需要导入并将其传递给格式化函数：

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

输出

date-fns NPM（开发者如何使用）：图4

IronPDF 简介

IronPDF 适用于 Node.js 是一个强大的 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转换

直接从URL生成PDF，允许您捕获网页内容并以编程方式将其保存为PDF文件。

PDF操作

轻松合并、拆分和操作现有PDF文档。 IronPDF提供了添加页面、拆分文档等功能。

PDF安全

通过密码加密或应用数字签名来保护您的PDF文档。 IronPDF提供了保护您的敏感文档免受未经授权访问的选项。

高质量输出

生成高质量的PDF文档，精确呈现文本、图像和格式。 IronPDF确保您生成的PDF保持对原始内容的忠实。

跨平台兼容性

IronPDF与多种平台兼容，包括Windows、Linux和macOS，适用于广泛的开发环境。

简单集成

轻松将IronPDF集成到您的Node.js应用程序中，使用其npm包。 API有良好的文档记录，使得将PDF生成功能融入您的项目变得简单明了。

安装

要安装IronPDF NPM包，请使用以下命令：

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

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

接下来，导航到您的项目目录：

cd date-pdf
SHELL

安装所需的包：

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

创建PDF

现在，让我们创建一个使用IronPDF生成PDF的简单示例。 在您的Next.js组件中（例如，pages/index.tsx），添加以下代码：

**PDF 生成 API：**第一步是创建后端 API 来生成 PDF 文档。 由于IronPDF仅在服务端运行，我们需要创建一个API来在用户想要生成PDF时进行调用。 在路径pages/api/pdf.js创建一个文件并添加以下内容。

IronPDF 需要许可证密钥，您可以从许可证页面获取，并将其放置在以下代码中。

// 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

现在修改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';

// 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

输出

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

结论

date-fns 是一个多功能且高效的库，为在React应用程序中处理日期提供了一个强大而简单和一致的工具集。 其模块化方法允许您仅包含所需的必要功能，保持您的打包大小小。 通过对日期操作和格式化的全面支持，date-fns 可以显著增强您的React项目。

IronPDF for Node.js 是一个强大的库，使开发者能够无缝地以编程方式生成、操作和处理 PDF 文档。 无论您是需要将 HTML、URL 或其他格式转换为 PDF，IronPDF 都提供简明的 API 来有效地完成这些任务。 其功能包括处理 PDF 表单、应用安全措施、执行 OCR 等。

Curtis Chau
Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位，专注于前端开发，精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面，喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

...
阅读更多

相关文章

Key in blue circle

立即获取免费的 30 天试用版密钥。

Your trial license will be sent to your email address

无任何限制。100% 解锁。无需信用卡。

OR
bullet_checked无需信用卡或创建账户无任何限制。100% 解锁。无需信用卡。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried Iron Suite
预约您的免费现场演示
Booking Badge

深受全球数百万工程师信赖

Iron Software 的客户徽标
获取您的无义务咨询
填写下面的表格或通过sales@ironsoftware.com
您的资料将始终保密。
深受全球数百万工程师信赖
Iron Software 的客户徽标
立即获取您的免费30 天试用密钥。
无需信用卡或创建账户
C# 用于 PDF 的 NuGet 库
通过 NuGet 安装

版本: 2026.9

PM > Install-Package IronPdf
nuget.org/packages/IronPdf/
  1. 在解决方案资源管理器中，右键点击引用，管理 NuGet 包
  2. 选择浏览并搜索 “IronPDF”
  3. 选择包并安装
C# PDF DLL
下载 DLL

版本: 2026.9

或在此处下载 Windows 安装程序。

  1. 下载并解压 IronPDF 到您的解决方案目录中的 ~/Libs 之类的位置
  2. 在 Visual Studio 解决方案资源管理器中，右键点击引用。选择浏览，“IronPDF.dll”

$999 起