节点帮助

date-fns NPM（如何为开发人员工作）

发布 2024年十月24日

简介

在 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

日期格式

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

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;

JAVASCRIPT

输出

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;

JAVASCRIPT

输出

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;

JAVASCRIPT

输出

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;

JAVASCRIPT

输出

date-fns NPM（如何为开发人员工作）：图 4

介绍IronPDF

IronPDF for 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，适用于广泛的开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 API 文档详实，使将 PDF 生成功能集成到您的项目中变得简单明了。

安装

安装IronPDF要翻译 NPM 软件包，请使用以下命令：

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

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

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

cd date-pdf

安装所需的软件包：

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

创建 PDF

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

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

IronPDF 需要许可证密钥，您可以从以下地址获取许可证页面Please provide the content you would like translated into Chinese along with the code where it should be placed.

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

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

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

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

JAVASCRIPT