Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. linkify-react
AJUDA DO NODE

linkify-react (Como funciona: um guia para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

No vasto mundo do desenvolvimento web, criar links clicáveis ​​ou tags de âncora dentro do texto é uma tarefa fundamental. Seja para criar um blog, uma plataforma de mídia social ou um cliente de e-mail, a capacidade de detectar e converter automaticamente URLs, endereços de e-mail e outros textos em links clicáveis ​​é crucial para proporcionar uma experiência de usuário perfeita. Apresentamos o Linkify React – um poderoso pacote npm desenvolvido para simplificar esse processo em aplicações React. Neste artigo, exploraremos como você pode usar o Linkify para simplificar a criação de links em seus projetos React, acompanhado de exemplos de código para demonstrar seu uso.

Além disso, também apresentaremos o IronPDF , uma biblioteca versátil que permite gerar documentos PDF de alta qualidade a partir de suas páginas da web. Mostraremos que, ao usar o IronPDF em conjunto com o Linkify, você pode criar facilmente PDFs que preservam os links clicáveis ​​identificados e convertidos pelo Linkify, garantindo que seus documentos mantenham a mesma interatividade do seu conteúdo web.

Primeiros passos com o componente Linkify para React

Linkify React é um pacote npm leve e fácil de usar que automatiza a conversão de texto simples contendo URLs, endereços de e-mail e outros links encontrados em strings filhas em hiperlinks clicáveis ​​como elementos aninhados. Isso elimina a necessidade de análise e formatação manual de links, economizando tempo e esforço valiosos para os desenvolvedores. Vamos explorar como você pode integrar o Linkify em seus aplicativos React.

Instalação

Para começar a usar o React Linkify, primeiro você precisa instalá-lo como uma dependência em seu projeto. Você pode fazer isso usando npm ou yarn. Abra o terminal e execute o seguinte comando:

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

Uso

Após instalar o React Linkify, você poderá integrá-lo facilmente aos seus componentes React. Aqui está um exemplo simples que demonstra como usar o React Linkify para renderizar links clicáveis ​​dentro do conteúdo de texto:

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

Neste exemplo, importamos o componente Linkify do pacote react-linkify e envolvemos nosso conteúdo de texto dentro dele. O React Linkify detecta automaticamente URLs e endereços de e-mail no texto e os converte em hiperlinks clicáveis.

Personalização

O Linkify oferece diversas propriedades, atributos e opções para personalizar o comportamento e a aparência dos links gerados. Por exemplo, você pode especificar atributos target para controlar como os links são abertos. Veja como você pode personalizar o comportamento do 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

Apresentando o IronPDF

IronPDF é um poderoso pacote npm projetado para facilitar a geração de PDFs em aplicações Node.js Permite criar documentos PDF a partir de conteúdo HTML , URLs ou arquivos PDF existentes. Seja para gerar faturas, relatórios ou qualquer outro tipo de documento, o IronPDF simplifica o processo com sua API intuitiva e conjunto robusto de recursos.

linkify-react (Como funciona: um guia para desenvolvedores): Figura 1 - IronPDF for Node.js: O site da biblioteca PDF for Node.js

Os principais recursos do IronPDF incluem:

1. Conversão de HTML para PDF

Converta elementos HTML em documentos PDF sem esforço. Essa funcionalidade é particularmente útil para gerar PDFs dinâmicos a partir de conteúdo da web.

2. Conversão de URL para PDF

Gere PDFs diretamente a partir de URLs. Isso permite capturar o conteúdo de páginas da web e salvá-lo como arquivos PDF programaticamente.

3. Manipulação de PDF

Mescle, divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades para manipular arquivos PDF, como adicionar páginas, dividir documentos e muito mais.

4. Segurança do PDF

Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais. O IronPDF oferece opções para proteger seus documentos confidenciais contra acesso não autorizado.

5. Saída de alta qualidade

Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação. O IronPDF garante que os PDFs gerados mantenham a fidelidade ao conteúdo original.

6. Compatibilidade entre plataformas

O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.

7. Integração simples

Integre facilmente o IronPDF em suas aplicações Node.js usando o pacote npm. A API é bem documentada, o que facilita a incorporação de recursos de geração de PDF em seus projetos.

Seja para criar um aplicativo web, um script do lado do servidor ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de forma eficiente e confiável.

Gere documentos PDF usando IronPDF e Linkify React.

Instalar dependências

Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando:

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

Em seguida, navegue até o diretório do seu projeto:

cd linkify-ironpdf
cd linkify-ironpdf
SHELL

Instale os pacotes necessários:

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

Criar um PDF

Agora, vamos criar um exemplo simples de geração de um PDF usando o IronPDF. No seu componente Next.js (ex.: pages/index.tsx), adicione o seguinte código:

API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma API para ser chamada quando um usuário quiser gerar um PDF. Crie um arquivo no caminho pages/api/pdf.js e adicione o seguinte conteúdo.

O IronPDF também requer uma chave de licença, que você pode obter na página de licenças e inserir no código abaixo:

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

Abaixo está o código index.js que configura a página de geração de PDF para o usuário:

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

Explicação do código

  1. Integração com o Linkify: O componente Linkify envolve a tag HTML que contém o texto do link.

    • Converte automaticamente qualquer URL ou e-mail detectado no texto em um link clicável.
  2. Geração de PDF:
    • Ao clicar no botão 'Gerar PDF', o aplicativo chama a API do servidor para gerar um PDF a partir da URL.
    • Esta API recupera a página da web a partir do URL e a converte em um documento PDF para download.

Página de geração do PDF de saída

linkify-react (Como funciona: um guia para desenvolvedores): Figura 2 - Página gerada para PDF

PDF resultante

linkify-react (Como funciona: um guia para desenvolvedores): Figura 3 - PDF gerado ao clicar no botão 'Gerar PDF'

Licença IronPDF

Insira a chave de licença aqui:

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

Conclusão

React Linkify simplifica o processo de criação de links clicáveis ​​em conteúdo de texto em aplicações React. Ao automatizar a detecção e conversão de URLs, endereços de e-mail e outros links em hiperlinks clicáveis, o Linkify simplifica o fluxo de trabalho de desenvolvimento e aprimora a experiência do usuário. Com sua fácil integração, opções de personalização e funcionalidade robusta, o React Linkify é uma ferramenta valiosa para desenvolvedores React que buscam criar interfaces envolventes e fáceis de usar.

Além disso, o IronPDF provou ser uma biblioteca Node.js robusta, feita sob medida para desenvolvedores que buscam integrar recursos abrangentes de geração, manipulação e edição de PDFs em seus aplicativos. Com suporte para conversão de diversos formatos para PDF, edição de documentos PDF existentes e gerenciamento de segurança de PDFs, o IronPDF oferece um conjunto de ferramentas versátil para criar e personalizar arquivos PDF programaticamente no ambiente Node.js Suas funcionalidades atendem a uma ampla gama de necessidades, desde a simples geração de documentos até tarefas complexas de gerenciamento de documentos, tornando-a uma ferramenta valiosa para desenvolvedores Node.js que trabalham com PDFs.

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim