NODE 說明

linkify-react（使用方法：開發者指南）

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

更新:7月 28, 2025

在廣闊的網頁開發領域，在文字中建立可點擊的連結或錨標籤是一項基本任務。無論你是建立部落格、社群媒體平台還是電子郵件用戶端，自動偵測 URL、電子郵件地址和其他文字並將其轉換為可點擊連結的功能對於提供流暢的使用者體驗至關重要。 Linkify React 應運而生——這是一個強大的 npm 包，旨在簡化 React 應用程式中的這一過程。在本文中，我們將探討如何使用 Linkify 來簡化 React 專案中的連結創建，並附上程式碼範例來示範其用法。

除此之外，我們還將向您介紹IronPDF ，這是一個功能強大的庫，可讓您從網頁產生高品質的 PDF 文件。我們將向您展示，透過將 IronPDF 與 Linkify 結合使用，您可以輕鬆建立 PDF，從而保留 Linkify 識別和轉換的可點擊鏈接，確保您的文件與您的 Web 內容保持相同的互動性。

Linkify React 元件入門

Linkify React 是一個輕量級且易於使用的 npm 包，它可以自動將包含 URL、電子郵件地址和其他在子字串中發現的連結的純文字轉換為可點擊的嵌套元素超連結。它省去了手動解析和格式化連結的需要，為開發人員節省了寶貴的時間和精力。讓我們深入了解如何將 Linkify 整合到您的 React 應用程式中。

安裝

要開始使用 React Linkify，首先需要將其作為依賴項安裝到您的專案中。您可以使用 npm 或 yarn 來實現。打開終端機並執行以下命令：

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

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

SHELL

用途

React Linkify 安裝完成後，您可以輕鬆地將其整合到您的 React 元件中。以下是一個簡單的範例，示範如何使用 React Linkify 在文字內容中渲染可點擊的連結：

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

在這個例子中，我們從react-linkify套件中匯入 Linkify 元件，並將我們的文字內容包裹在其中。 React Linkify 會自動偵測文字中的 URL 和電子郵件地址，並將它們轉換為可點擊的超連結。

客製化

Linkify 提供各種屬性、特性和選項，用於自訂產生的連結的行為和外觀。例如，您可以指定target屬性來控制連結的開啟方式。以下是如何自訂 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

介紹 IronPDF。

IronPDF是一個功能強大的 npm 包，旨在簡化 Node.js 應用程式中的 PDF 生成過程。它允許您從HTML 內容、 URL或現有 PDF 文件建立 PDF 文件。無論您是產生發票、報告或任何其他類型的文檔，IronPDF 都能憑藉其直覺的API和強大的功能集簡化流程。

! linkify-react（工作原理：開發者指南）：圖 1 - IronPDF for Node.js：Node.js PDF 庫網站

IronPDF 的主要功能包括

1.HTML 至 PDF 轉換

輕鬆將HTML元素轉換為PDF文件。此功能對於從網頁內容產生動態 PDF 特別有用。

2. URL 轉 PDF

直接從URL產生PDF文件。這樣，您就可以透過程式擷取網頁內容並將其儲存為 PDF 檔案。

3. PDF 處理

輕鬆合併、分割和操作現有 PDF 文件。 IronPDF 提供操作 PDF 檔案的功能，例如追加頁面、分割文件等等。

4.PDF安全性

使用密碼加密或套用數位簽章來保護您的 PDF 文件。 IronPDF 提供多種選項，保護您的敏感文件免受未經授權的存取。

5. 高品質輸出

產生高品質的 PDF 文檔，精確呈現文字、圖像和格式。 IronPDF 可確保您產生的 PDF 檔案與原始內容一致。

6. 跨平台相容性

IronPDF 與包括 Windows、Linux 和 macOS 在內的各種平台相容，使其適用於各種開發環境。

7. 簡易集成

使用 IronPDF 的 npm 包，即可輕鬆整合到您的 Node.js 應用程式中。該 API 文件齊全，可以輕鬆地將 PDF 生成功能整合到您的專案中。

無論您是建立 Web 應用程式、伺服器端腳本或命令列工具， IronPDF都能讓您有效率且可靠地建立專業級 PDF 文件。

使用 IronPDF 和 Linkify React 產生 PDF 文檔

安裝依賴項

首先，使用以下命令建立一個新的 Next.js 專案（如果還沒有建立）：

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

接下來，導航到您的專案目錄：

cd linkify-ironpdf

cd linkify-ironpdf

SHELL

安裝所需軟體包：

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

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

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

以下是index.js程式碼，用於設定使用者的 PDF 生成頁面：

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

程式碼解釋

Linkify 整合： Linkify元件包裹著包含連結文字的 HTML 標籤。
- 自動將文字中偵測到的任何 URL 或電子郵件轉換為可點擊的連結。
PDF 生成：
- 當點擊"產生 PDF"按鈕時，應用程式會呼叫後端 API 從 URL 產生 PDF。
- 此 API 從 URL 檢索網頁並將其轉換為可下載的 PDF 文件。

輸出 PDF 產生頁面

! linkify-react（工作原理：開發者指南）：圖 2 - 用於產生 PDF 的輸出頁面

生成的PDF文件

! linkify-react（工作原理：開發者指南）：圖 3 - 點擊"生成 PDF"按鈕後輸出的 PDF 文件

IronPDF 授權。

請在此輸入許可證密鑰：

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

結論

React Linkify 簡化了在 React 應用程式中建立文字內容中可點擊連結的過程。 Linkify 透過自動偵測和轉換 URL、電子郵件地址和其他連結為可點擊的超鏈接，簡化了開發工作流程，並增強了使用者體驗。 React Linkify 具有易於整合、可自訂和強大的功能，對於希望創建引人入勝且用戶友好的介面的 React 開發人員來說，它是一款非常有價值的工具。

此外， IronPDF已被證明是一個強大的 Node.js 庫，專為希望將全面的 PDF 生成、操作和編輯功能整合到其應用程式中的開發人員而設計。 IronPDF 支援將各種格式轉換為 PDF、編輯現有 PDF 文件以及管理 PDF 安全性，它提供了一個功能全面的工具包，用於在 Node.js 環境中以程式設計方式建立和自訂 PDF 文件。它的功能可以滿足從簡單的文件生成到複雜的文件管理任務等各種需求，使其成為使用 PDF 的 Node.js 開發人員的寶貴工具。

Darrius Serrant

立即與工程團隊聊天

全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

next-auth NPM（開發者的使用�...

客戶亮點：

開發者焦點：

網絡研討會：

linkify-react（使用方法：開發者指南）

Linkify React 元件入門

安裝

用途

客製化

介紹 IronPDF。

IronPDF 的主要功能包括

1.HTML 至 PDF 轉換

2. URL 轉 PDF

3. PDF 處理

4.PDF安全性

5. 高品質輸出

6. 跨平台相容性

7. 簡易集成

使用 IronPDF 和 Linkify React 產生 PDF 文檔

安裝依賴項

建立 PDF

程式碼解釋

輸出 PDF 產生頁面

生成的PDF文件

IronPDF 授權。

結論

linkify-react（使用方法：開發者指南）

Linkify React 元件入門

安裝

用途

客製化

介紹 IronPDF。

IronPDF 的主要功能包括

1.HTML 至 PDF 轉換

2. URL 轉 PDF

3. PDF 處理

4.PDF安全性

5. 高品質輸出

6. 跨平台相容性

7. 簡易集成

使用 IronPDF 和 Linkify React 產生 PDF 文檔

安裝依賴項

建立 PDF

程式碼解釋

輸出 PDF 產生頁面

生成的PDF文件

IronPDF 授權。

結論

相關文章

next-auth NPM（開發者的使用方法）

Koa node js（開發者的使用方法）

date-fns NPM（開發者的使用方法）

下一步：開始免費 30 天試用

下一步：開始免費 30 天試用

深受全球超過 200 萬名工程師信賴