POMOC NODE

linkify-react (Jak to działa: Przewodnik dla deweloperów)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Zaktualizowano:18 stycznia, 2026

W rozległym świecie tworzenia stron internetowych tworzenie klikalnych linków lub tagów kotwic w tekście jest podstawowym zadaniem. Niezależnie od tego, czy tworzysz bloga, platformę społecznościową czy klienta poczty e-mail, możliwość automatycznego wykrywania i konwersji adresów URL, adresów e-mail i innych fragmentów tekstu na klikalne linki ma kluczowe znaczenie dla zapewnienia płynnego doświadczenia użytkownika. Poznaj Linkify React – potężny pakiet npm zaprojektowany w celu usprawnienia tego procesu w aplikacjach React. W tym artykule omówimy, jak można wykorzystać Linkify do uproszczenia tworzenia linków w projektach React, wraz z przykładami kodu ilustrującymi jego zastosowanie.

Ponadto przedstawimy Państwu IronPDF, wszechstronną bibliotekę, która pozwala generować wysokiej jakości dokumenty PDF na podstawie stron internetowych. Pokażemy Ci, że korzystając z IronPDF w połączeniu z Linkify, możesz łatwo tworzyć pliki PDF, które zachowują klikalne linki zidentyfikowane i przekonwertowane przez Linkify, zapewniając, że Twoje dokumenty zachowują taką samą interaktywność jak treści internetowe.

Pierwsze kroki z komponentem Linkify React

Linkify React to lekki i łatwy w użyciu pakiet npm, który automatyzuje konwersję zwykłego tekstu zawierającego adresy URL, adresy e-mail i inne wykryte linki w podciągach tekstowych na klikalne hiperłącza jako elementy zagnieżdżone. Eliminuje to konieczność ręcznego analizowania i formatowania linków, oszczędzając programistom cenny czas i wysiłek. Przyjrzyjmy się, jak zintegrować Linkify z aplikacjami React.

Instalacja

Aby rozpocząć pracę z React Linkify, należy najpierw zainstalować go jako zależność w swoim projekcie. Można to zrobić za pomocą npm lub yarn. Otwórz terminal i uruchom następujące polecenie:

npm install react-linkify
# or
yarn add react-linkify

npm install react-linkify
# or
yarn add react-linkify

SHELL

Zastosowanie

Po zainstalowaniu React Linkify można go łatwo zintegrować z komponentami React. Oto prosty przykład pokazujący, jak używać React Linkify do renderowania klikalnych linków w treści tekstowej:

import React from 'react';
import Linkify from 'react-linkify';

// A React component to display clickable links
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import Linkify from 'react-linkify';

// A React component to display clickable links
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};

export default MyComponent;

JAVASCRIPT

W tym przykładzie importujemy komponent Linkify z pakietu react-linkify i umieszczamy w nim naszą treść tekstową. React Linkify automatycznie wykrywa adresy URL i adresy e-mail w tekście i przekształca je w klikalne hiperłącza.

Dostosowanie

Linkify udostępnia różne właściwości, atrybuty i opcje umożliwiające dostosowanie zachowania i wyglądu generowanych linków. Na przykład można określić atrybuty target, aby kontrolować sposób otwierania linków. Oto jak można dostosować działanie React Linkify:

<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>

<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>

JAVASCRIPT

Przedstawiamy IronPDF

IronPDF to potężny pakiet npm zaprojektowany w celu ułatwienia generowania plików PDF w aplikacjach Node.js. Umożliwia tworzenie dokumentów PDF na podstawie treści HTML, adresów URL lub istniejących plików PDF. Niezależnie od tego, czy generujesz faktury, raporty czy jakikolwiek inny rodzaj dokumentu, IronPDF upraszcza ten proces dzięki intuicyjnemu API i rozbudowanemu zestawowi funkcji.

linkify-react (Jak to działa: przewodnik dla programistów): Rysunek 1 – IronPDF for Node.js: strona internetowa biblioteki PDF dla Node.js

Najważniejsze funkcje IronPDF obejmują

1. Konwersja HTML do PDF

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

2. Konwersja adresów URL do formatu PDF

Generuj pliki PDF bezpośrednio z adresów URL. Pozwala to na programowe przechwytywanie treści stron internetowych i zapisywanie ich jako pliki PDF.

3. Manipulacja plikami PDF

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

4. 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.

5. 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.

6. 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.

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

Niezależnie od tego, czy tworzysz aplikację internetową, skrypt po stronie serwera, czy narzędzie wiersza poleceń, IronPDF umożliwia wydajne i niezawodne tworzenie profesjonalnych dokumentów PDF.

Generowanie dokumentów PDF przy użyciu IronPDF i Linkify React

Zainstaluj zależności

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

npx create-next-app@latest linkify-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest linkify-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

SHELL

Następnie przejdź do katalogu projektu:

cd linkify-ironpdf

cd linkify-ironpdf

SHELL

Zainstaluj wymagane pakiety:

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

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

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ć API, które będzie wywoływane, gdy użytkownik zechce wygenerować plik PDF. Utwórz plik w ścieżce pages/api/pdf.js i dodaj poniższą treść.

IronPDF wymaga również klucza licencyjnego, który można uzyskać na stronie licencji i umieścić w poniższym kodzie:

// pages/api/pdf.js

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

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

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    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 goes here";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    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

Poniżej znajduje się kod index.js, który konfiguruje stronę generowania plików PDF dla użytkownika:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import Linkify from 'react-linkify';

// Home component for link conversion and PDF generation
export default function Home() {
  const [text, setText] = useState("");

  // Function to generate PDF from entered URL
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + 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);
    }
  };

  // Handle changes in the input text field
  const handleChange = (event) => {
    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 Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter URL to Linkify and Convert to PDF:</span>{" "}
        </p>
        <input type="text" value={text} onChange={handleChange} />
        <Linkify properties={{ target: '_blank' }}>
          <p>
            Clickable links from input text: {text}
          </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </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 } from "react";
import Linkify from 'react-linkify';

// Home component for link conversion and PDF generation
export default function Home() {
  const [text, setText] = useState("");

  // Function to generate PDF from entered URL
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + 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);
    }
  };

  // Handle changes in the input text field
  const handleChange = (event) => {
    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 Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter URL to Linkify and Convert to PDF:</span>{" "}
        </p>
        <input type="text" value={text} onChange={handleChange} />
        <Linkify properties={{ target: '_blank' }}>
          <p>
            Clickable links from input text: {text}
          </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </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

Wyjaśnienie kodu

Integracja z Linkify:
- Element Linkify otacza tag HTML zawierający tekst linku.
- Automatycznie przekształca każdy wykryty adres URL lub adres e-mail w tekście w klikalny link.
Generowanie plików PDF:
- Po kliknięciu przycisku "Generuj PDF" aplikacja wywołuje backendowe API w celu wygenerowania pliku PDF na podstawie adresu URL.
- To API pobiera stronę internetową z podanego adresu URL i konwertuje ją na dokument PDF, który można pobrać.

Strona generująca plik PDF

linkify-react (Jak to działa: przewodnik dla programistów): Rysunek 2 – Strona wyjściowa do generowania pliku PDF

Powstały plik PDF

linkify-react (Jak to działa: przewodnik dla programistów): Rysunek 3 – Plik PDF wygenerowany po kliknięciu przycisku

Licencja IronPDF

Umieść tutaj klucz licencyjny:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

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

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

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

JAVASCRIPT

Wnioski

React Linkify upraszcza proces tworzenia klikalnych linków w treści tekstowej w aplikacjach React. Dzięki automatycznemu wykrywaniu i przekształcaniu adresów URL, adresów e-mail i innych linków w klikalne hiperłącza, Linkify usprawnia proces tworzenia oprogramowania i poprawia komfort użytkowania. Dzięki łatwej integracji, opcjom dostosowywania i solidnej funkcjonalności React Linkify jest cennym narzędziem dla programistów React, którzy chcą tworzyć angażujące i przyjazne dla użytkownika interfejsy.

Ponadto IronPDF okazał się solidną biblioteką Node.js dostosowaną do potrzeb programistów pragnących zintegrować z własnymi aplikacjami kompleksowe funkcje generowania, manipulacji i edycji plików PDF. Dzięki obsłudze konwersji różnych formatów do PDF, edycji istniejących dokumentów PDF oraz zarządzania zabezpieczeniami PDF, IronPDF zapewnia wszechstronny zestaw narzędzi do programowego tworzenia i dostosowywania plików PDF w środowisku Node.js. Jego funkcje zaspokajają szeroki zakres potrzeb, od prostego generowania dokumentów po złożone zadania związane z zarządzaniem dokumentami, co czyni go cennym narzędziem dla programistów Node.js pracujących z plikami PDF.

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