Altbilgi içeriğine atla
  1. Node.js için IronPDF
  2. IronPDF for Node.js Blogu
  3. Node Yardım
  4. date-fns NPM
NODE YARDıM

date-fns NPM (Geliştiriciler İçin Nasıl Çalışır)

Darrius Serrant
Darrius Serrant
Güncellendi:

Bir React uygulamasında tarihlerle çalışırken, date-fns JavaScript tarihlerini manipüle etmeyi çok kolaylaştıran güçlü ve hafif bir modern JavaScript tarih yardımcı kütüphanesidir. date-fns mevcut yerel tarih veri türlerini kullanır ve güvenlik amacıyla çekirdek nesneleri genişletmez, yani dahili tarih veri türlerini değiştirmekten veya onlara işlevsellik eklemekten kaçınarak potansiyel hatalara veya çakışmalara yol açmaz. Bu makalede, date-fns'i React projenize nasıl entegre edeceğimizi ve bazı pratik örnekler sunacağımızı keşfedeceğiz.

Neden date-fns?

date-fns birkaç avantaj sunar:

  • Modüler: Sadece ihtiyaç duyduğunuz fonksiyonları import edebilirsiniz ve bu sayede bundle boyutunu azaltabilirsiniz.
  • Değiştirilemez: Saf fonksiyonlar kullanarak inşa edilmiştir, bu nedenle bu fonksiyonlar orijinal tarih nesnelerini değiştirmez.
  • Kapsamlı: Tarih manipülasyonu ve formatlama için geniş bir fonksiyon yelpazesi sunar.
  • Uluslararasılaşma: Birden çok dili destekler.

Başlarken

İlk önce, npm aracılığıyla date-fns npm paketini yükleyin:

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

Tarihleri Biçimlendirme

En yaygın görevlerden biri, date-fns ile tarihler biçimlendirmektir. Zaman diliminizdeki mevcut tarihi okunabilir bir formatta gösteren basit bir bileşen oluşturalım.

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

Çıktı

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 1

Tarihleri Ayrıştırma

Ayrıca dizelerden tarihler de ayrıştırabilirsiniz. Bir tarih dizisini ayrıştırma ve farklı bir formatta gösterme örneği:

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

Çıktı

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 2

Tarih Ekleme ve Çıkarma

date-fns, tarihlerden zaman eklemeyi veya çıkarmayı kolaylaştırır. İşte güncel tarihe 7 gün eklemeye bir örnek:

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

Çıktı

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 3

Uluslararasılaştırma

date-fns birden çok yerel dil destekler. Belirli bir yerel ayarı kullanmak için onu içe aktarmanız ve biçimlendirme fonksiyonuna iletmeniz gerekir:

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

Çıktı

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 4

IronPDF Tanıtımı

IronPDF Node.js için, geliştiricilerin Node.js projelerinde PDF oluşturmasına ve düzenlemesine olanak tanıyan güçlü bir Node.js PDF kütüphanesidir. HTML'den PDF oluşturmanız, mevcut PDF'leri manipüle etmeniz veya web sayfalarını PDF formatına dönüştürmeniz gerektiğinde, IronPDF ihtiyaçlarınızı karşılar.

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 5 - IronPDF for Node.js: Node.js PDF Kütüphanesi

Ana Özellikler

HTML'den PDF'ye Dönüşüm

HTML içeriğini kolayca PDF belgelerine dönüştürün. Bu özellik, web içeriğinden dinamik PDF'ler oluşturmak için özellikle kullanışlıdır.

URL'den PDF'ye Dönüşüm

URL'lerden doğrudan PDF oluşturarak, web sayfalarının içeriğini yakalayabilir ve bunları programatik olarak PDF dosyaları olarak kaydedebilirsiniz.

PDF Manipülasyonu

Mevcut PDF belgelerini birleşik, parçalara ayırın ve kolayca manipüle edin. IronPDF, sayfaların eklenmesi, belgelerin bölünmesi ve daha fazlası gibi işlevler sunar.

PDF Güvenliği

PDF belgelerinizi parolalarla şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişime karşı koruma seçenekleri sunar.

Yüksek Kaliteli Çıktı

Metin, görseller ve biçimlendirmeyi doğru şekilde render ederek yüksek kaliteli PDF belgeler üretilir. IronPDF, oluşturduğunuz PDF'lerin orijinal içeriğe sadık kalmasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur ve geniş bir geliştirme ortamı yelpazesine uygundur.

Basit Entegrasyon

IronPDF, npm paketi kullanarak Node.js uygulamalarınıza kolayca entegre edilir. API, iyi belgelenmiştir ve projelerinize PDF oluşturma yeteneklerini entegre etmeyi kolaylaştırır.

Kurulum

IronPDF NPM paketini kurmak için aşağıdaki komutu kullanın:

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

IronPDF Kullanarak PDF Belgesi Oluşturma ve date-fns Kullanımı

Bağımlılıkları Kurun: İlk olarak, yeni bir Next.js projesi oluşturun (henüz oluşturmadıysanız) ve aşağıdaki komutu kullanın: Burada belirtildiği gibi

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

Sonrasında, proje dizinine gidin:

cd date-pdf
cd date-pdf
SHELL

Gerekli paketleri kurun:

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

PDF Oluşturma

Şimdi, IronPDF kullanarak bir PDF oluşturma örneğine bakalım. Next.js bileşeninizde (örneğin, pages/index.tsx), aşağıdaki kodu ekleyin:

PDF Üretim API'si: İlk adım, PDF belgesini oluşturmak için bir backend API oluşturmaktır. IronPDF sadece sunucu tarafında çalıştığı için bir kullanıcı PDF oluşturmak istediğinde çağrılacak bir API oluşturmamız gerekiyor. pages/api/pdf.js yolunda bir dosya oluşturun ve aşağıdaki içerikleri ekleyin.

IronPDF için bir lisans anahtarı gereklidir, bunu lisans sayfasından alabilir ve aşağıdaki koda yerleştirebilirsiniz.

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

Şimdi index.js'ü değiştirin ve aşağıdaki kodu ekleyin:

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

Çıktı

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 6

PDF

date-fns NPM (Geliştiriciler için Nasıl Çalışır): Şekil 7

IronPDF Lisansı

IronPDF.

Lisans Anahtarını buraya yerleştirin:

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

Sonuç

date-fns, React uygulamalarında tarihlerle çalışmak için güçlü, basit ve tutarlı bir araç seti sağlayan çok yönlü ve verimli bir kütüphanedir. Modüler yaklaşımı, sadece gerekli fonksiyonları dahil etmenize olanak tanır, bu da paket boyutunuzu küçük tutar. Kapsamlı tarih manipülasyonu ve biçimlendirme desteği ile date-fns React projelerinizi önemli ölçüde geliştirebilir.

IronPDF for Node.js, geliştiricilerin PDF belgelerini programatik olarak oluşturmasını, manipüle etmesini ve bu belgelerle çalışmasını kesintisiz bir şekilde sağlayan sağlam bir kütüphanedir. HTML, URL veya diğer formatlardan PDF'ye dönüştürmeye ihtiyacınız olduğunda, IronPDF bu görevleri verimli bir şekilde gerçekleştirmenize olanak tanıyan basit API'ler sunar. Kapasiteleri, PDF formlarıyla başa çıkmak, güvenlik önlemleri uygulamak, OCR gerçekleştirmek ve daha fazlasını içerir.

Darrius Serrant
Darrius Serrant
  Mühendislik ekibiyle şimdi sohbet edin
Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimi alanında Lisans Derecesine sahip ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışıyor. Genç yaşlardan itibaren kodlamaya çekildi, bilgisayar bilimi hem gizemli hem de erişilebilir olarak görüldü ve bu özellik, yaratıcılık ...

Daha Fazla Oku

İlgili Makaleler

30 günlük deneme → Tam ürün. Sınırsız. Kart gerektirmez. Ücretsiz Denemeye Başlayın

Iron Destek Ekibi

Haftada 5 gün, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara