Icône de message
Passer au contenu du pied de page
  1. IronPDF for Node.js
  2. Blog IronPDF pour Node.js
  3. Aide Node
  4. linkify-react
AIDE NODE

linkify-react (Comment ça marche : Un guide pour les développeurs)

Darrius Serrant
Darrius Serrant
Mis à jour:

Dans le vaste monde du développement web, créer des liens cliquables ou des balises d'ancrage au sein d'un texte est une tâche fondamentale. Que vous construisiez un blog, une plateforme de médias sociaux ou un client de messagerie, la capacité à détecter et convertir automatiquement les URL, adresses email et autres textes en liens cliquables est cruciale pour offrir une expérience utilisateur fluide. Voici Linkify React – un puissant package npm conçu pour simplifier ce processus dans les applications React. Dans cet article, nous explorerons comment utiliser Linkify pour simplifier la création de liens dans vos projets React, accompagné d'exemples de code pour démontrer son utilisation.

En plus de cela, nous vous présenterons également IronPDF, une bibliothèque polyvalente qui vous permet de générer des documents PDF de haute qualité à partir de vos pages web. Nous vous montrerons que, en utilisant IronPDF en conjonction avec Linkify, vous pouvez facilement créer des PDFs qui conservent les liens cliquables identifiés et convertis par Linkify, garantissant que vos documents maintiennent la même interactivité que votre contenu web.

Premiers pas avec le composant Linkify React

Linkify React est un package npm léger et facile à utiliser qui automatise la conversion de texte brut contenant des URL, adresses email, et autres liens découverts au sein des chaînes enfant en hyperliens cliquables sous forme d'éléments imbriqués. Il élimine le besoin de parsing et de formatage de lien manuels, économisant ainsi aux développeurs un temps et des efforts précieux. Plongeons dans comment vous pouvez intégrer Linkify dans vos applications React.

Installation

Pour commencer avec React Linkify, vous devez d'abord l'installer comme dépendance dans votre projet. Vous pouvez le faire en utilisant npm ou yarn. Ouvrez votre terminal et exécutez la commande suivante :

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

Utilisation

Une fois React Linkify installé, vous pouvez facilement l'intégrer dans vos composants React. Voici un exemple simple montrant comment utiliser React Linkify pour rendre des liens cliquables au sein du contenu textuel :

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

Dans cet exemple, nous importons le composant Linkify du package react-linkify et enveloppons notre contenu textuel à l'intérieur. React Linkify détecte automatiquement les URL et les adresses email dans le texte et les convertit en hyperliens cliquables.

Personnalisation

Linkify propose divers props, attributs et options pour personnaliser le comportement et l'apparence des liens générés. Par exemple, vous pouvez spécifier des attributs target pour contrôler la façon dont les liens s'ouvrent. Voici comment vous pouvez personnaliser le comportement de 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

Présentation d'IronPDF

IronPDF est un puissant package npm conçu pour faciliter la génération de PDF dans les applications Node.js. It allows you to create PDF documents from HTML content, URLs, or existing PDF files. Que vous génériez des factures, des rapports ou tout autre type de document, IronPDF simplifie le processus avec son API intuitif et son ensemble de fonctionnalités robustes.

linkify-react (Comment ça fonctionne : Un guide pour les développeurs) : Figure 1 - IronPDF pour Node.js : Le site web de la bibliothèque PDF Node.js

Les caractéristiques clés d'IronPDF incluent

1. Conversion de HTML en PDF

Convertissez sans effort des éléments HTML en documents PDF. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.

2. Conversion d'URL en PDF

Générez des PDFs directement à partir d'URLs. Cela vous permet de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF programmatiquement.

3. Manipulation de PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF fournit des fonctionnalités pour manipuler les fichiers PDF, comme ajouter des pages, diviser des documents, et plus encore.

4. Sécurité des PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre l'accès non autorisé.

5. Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.

6. Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.

7. Intégration simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui facilite l'incorporation des capacités de génération de PDF dans vos projets.

Que vous construisiez une application web, un script côté serveur ou un outil en ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

Générez des documents PDF en utilisant IronPDF et Linkify React

Installer les dépendances

D'abord, créez un nouveau projet Next.js (si vous ne l'avez pas déjà fait) en utilisant la commande suivante :

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

Ensuite, naviguez vers votre répertoire de projet :

cd linkify-ironpdf
cd linkify-ironpdf
SHELL

Installez les paquets requis :

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

Créer un PDF

Maintenant, créons un exemple simple de génération de PDF en utilisant IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

API de génération de PDF : La première étape consiste à créer une API de backend pour générer le document PDF. Étant donné qu'IronPDF s'exécute uniquement côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous.

IronPDF nécessite également une clé de licence, que vous pouvez obtenir depuis la page de licence et la placer dans le code ci-dessous :

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

Ci-dessous le code index.js qui configure la page de génération de PDF pour l'utilisateur :

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

Explication du code

  1. Intégration avec Linkify :

    • Le composant Linkify entoure la balise HTML contenant le texte du lien.
    • Convertit automatiquement toute URL ou email détecté dans le texte en un lien cliquable.
  2. Génération de PDF :
    • Lorsque le bouton 'Generate PDF' est cliqué, l'application appelle l'API backend pour générer un PDF à partir de l'URL.
    • Cette API récupère la page web depuis l'URL et la convertit en un document PDF téléchargeable.

Page de génération de PDF en sortie

linkify-react (Comment ça fonctionne : Un guide pour les développeurs) : Figure 2 - Page en sortie pour la génération de PDF

PDF résultant

linkify-react (Comment ça fonctionne : Un guide pour les développeurs) : Figure 3 - PDF en sortie après avoir cliqué sur le bouton 'Generate PDF'

Licence IronPDF

Placez la clé de licence ici :

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

Conclusion

React Linkify simplifie le processus de création de liens cliquables dans le contenu textuel des applications React. En automatisant la détection et la conversion des URL, adresses email et autres liens en hyperliens cliquables, Linkify rationalise le flux de travail du développement et améliore l'expérience utilisateur. Avec son intégration facile, ses options de personnalisation, et sa fonctionnalité robuste, React Linkify est un outil précieux pour les développeurs React cherchant à créer des interfaces attrayantes et conviviales.

En plus de cela, IronPDF s'est avéré être une bibliothèque Node.js robuste, conçue pour les développeurs cherchant à intégrer des capacités complètes de génération, manipulation et édition de PDF dans leurs applications. Avec la prise en charge de la conversion de divers formats en PDF, l'édition de documents PDF existants et la gestion de la sécurité PDF, IronPDF offre une boîte à outils polyvalente pour créer et personnaliser des fichiers PDF de manière programmatique dans l'environnement Node.js. Ses fonctionnalités répondent à un large éventail de besoins, allant de la génération de documents simples à des tâches complexes de gestion de documents, en faisant un outil précieux pour les développeurs Node.js travaillant avec les PDF.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit