A Biblioteca PDF do Node.js

Explore IronPDF for Node.js Comece seu teste gratuito

HTML para PDF

Online Demo Veja todos os exemplos de código %s

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

(async () => {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Export the PDF to a file
    await pdf.saveAs("output.pdf");

    // Advanced Example with HTML Assets
    // Load external HTML assets: Images, CSS, and JavaScript.
    const htmlContentWithAssets = "<img src='icons/iron.png'>";
    const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);

    // Save the PDF with loaded assets
    await advancedPdf.saveAs("html-with-assets.pdf");
})();

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

(async () => {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Export the PDF to a file
    await pdf.saveAs("output.pdf");

    // Advanced Example with HTML Assets
    // Load external HTML assets: Images, CSS, and JavaScript.
    const htmlContentWithAssets = "<img src='icons/iron.png'>";
    const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);

    // Save the PDF with loaded assets
    await advancedPdf.saveAs("html-with-assets.pdf");
})();

AJUDA DO NODE

toastify npm (Como funciona para desenvolvedores)

Curtis Chau

Updated: 20 de junho de 2026

No desenvolvimento web moderno, fornecer feedback oportuno aos usuários é crucial para uma experiência de usuário perfeita. As notificações Toast são uma forma eficaz de enviar mensagens sem interromper o fluxo de trabalho do usuário. O pacote React-toastify é uma escolha popular para implementar notificações toast em aplicações React devido à sua simplicidade e flexibilidade. Analisaremos também o pacote IronPDF NPM para gerar, editar e gerenciar documentos PDF. Este artigo irá guiá-lo pelo processo de integração do React-toastify e do IronPDF em seu projeto React.

O que é o Toastify?

React-toastify é um pacote NPM que permite adicionar notificações toast personalizáveis aos seus aplicativos React com configuração mínima. Ele oferece uma variedade de recursos, incluindo diferentes tipos de notificação, funcionalidade de fechamento automático, estilos personalizados e muito mais.

toastify npm (Como Funciona para Desenvolvedores): Figura 1 - Notificações toast com diferentes estilos e customizações usando o pacote React-Toastify.

Instalação

Para começar a usar o react-toastify , você precisa instalar o pacote via NPM ou Yarn. Execute o seguinte comando no diretório raiz do seu projeto:

npm install react-toastify

npm install react-toastify

SHELL

yarn add react-toastify

yarn add react-toastify

SHELL

Uso básico

Após instalar o pacote, você pode começar a usar o react-toastify em sua aplicação React. Abaixo, segue um exemplo de código simples para demonstrar como integrar e usar o react-toastify.

1. Importar componentes do Toastify

Primeiro, você precisa importar os componentes necessários do react-toastify:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

JavaScript

2. Configure o Toastify

Em seguida, adicione o componente ToastContainer ao seu aplicativo.

function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}

function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}

JavaScript

3. Acionar notificações Toast

Você pode acionar uma notificação pop-up usando a função toast. Aqui está um exemplo de código de como exibir uma mensagem de sucesso:

function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}

function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}

function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

JavaScript

Recursos avançados

Ganchos OnOpen e OnClose

O React-toastify oferece diversos recursos avançados que permitem personalizar o comportamento e a aparência das suas notificações (toasts) usando os hooks onOpen e onClose .

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}

export default App;

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}

export default App;

JavaScript

Neste exemplo:

Quando a notificação (toast) é exibida, o gancho onOpen é acionado e exibimos um alerta.
Quando a notificação é fechada, o gancho onClose é acionado e outro alerta é exibido.

Posições personalizadas

Você pode exibir notificações em diferentes posições na tela usando a opção de posição:

toast.info("Information message", {
  position: "top-right"
});

toast.info("Information message", {
  position: "top-right"
});

JavaScript

Duração do fechamento automático

Você pode definir a duração de exibição de uma notificação usando a opção autoClose :

toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});

toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});

JavaScript

Estilização personalizada

É possível aplicar estilos personalizados às notificações usando as opções className e style:

toast.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});

toast.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});

JavaScript

Dispensando brindes

As notificações (toasts) podem ser descartadas programaticamente usando o método toast.dismiss:

const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}

const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}

JavaScript

Aqui está um exemplo completo demonstrando o uso de vários recursos do react-toastify:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Information message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.error("Error message", {
      className: 'custom-toast',
      style: { background: 'red', color: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

export default App;

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Information message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.error("Error message", {
      className: 'custom-toast',
      style: { background: 'red', color: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

export default App;

JavaScript

SAÍDA

toastify npm (Como Funciona para Desenvolvedores): Figura 2 - Aplicação React-Toastify rodando no localhost porta:3000 e exibindo notificações toast para mensagens de Sucesso, Aviso e Erro.

Apresentando o IronPDF

IronPDF é uma poderosa biblioteca C# para PDF que permite aos desenvolvedores gerar e editar PDFs em seus projetos .NET . Seja para criar PDFs a partir de HTML, manipular PDFs existentes ou converter páginas da web para o formato PDF, o IronPDF tem a solução ideal para você.

toastify npm (Como Funciona para Desenvolvedores): Figura 3 - IronPDF for Node.js: A Biblioteca PDF for Node.js

Aqui estão alguns recursos e casos de uso principais:

1. Conversão de HTML para PDF

O IronPDF pode converter páginas HTML, seja a partir de uma URL, arquivo HTML ou string HTML, em PDF. Você também pode converter arquivos HTML locais ou strings HTML em PDFs.

2. Suporte multiplataforma

O IronPDF funciona perfeitamente em diversas plataformas, incluindo:

.NET Core (8, 7, 6, 5 e 3.1+) *.NET Standard (2.0+)
.NET Framework (4.6.2 ou superior)
Web (Blazor e WebForms)
Desktop (WPF e MAUI)
Console (Aplicativo e Biblioteca)
Ambientes Windows, Linux e macOS.

3. Edição e manipulação de PDFs

O IronPDF permite que você:

Defina propriedades e segurança (senhas, permissões).
Adicionar assinaturas digitais .
Comprimir arquivos PDF.
Editar metadados e histórico de revisões.
Adicionar, copiar e excluir páginas.

4. Personalização e Formatação

Você pode aplicar modelos de página, cabeçalhos, rodapés, números de página e margens personalizadas. O IronPDF suporta codificação de caracteres UTF-8, URLs base, codificação de recursos e muito mais.

5. Conformidade com as normas

O IronPDF adere a vários padrões de PDF, incluindo as versões PDF (1.2 - 1.7), PDF/UA (PDF/UA-1) e PDF/A (PDF/A-3b).

Gere um documento PDF usando o pacote NPM IronPDF e Toastify.

Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando. Consulte a página de configuração .

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

npx create-next-app@latest my-pdf-app --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 my-pdf-app

cd my-pdf-app

SHELL

Instale os pacotes necessários:

> npm install @ironsoftware/ironpdf, react-toastify

npm install @ironsoftware/ironpdf, react-toastify

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

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useState } from "react";

export default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to show toast notifications
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: { background: 'red', color: 'white' }
        });
    };

    // Function to generate a PDF
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url=' + textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    // Handler for input change
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div className={styles.container}>
            <Head>
                <title>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin: 20, padding: 5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                    <input type="text" value={textInput} onChange={handleChange} />
                </p>
                <button style={{margin: 20, padding: 5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer />
            </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 { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useState } from "react";

export default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to show toast notifications
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: { background: 'red', color: 'white' }
        });
    };

    // Function to generate a PDF
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url=' + textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    // Handler for input change
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div className={styles.container}>
            <Head>
                <title>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin: 20, padding: 5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                    <input type="text" value={textInput} onChange={handleChange} />
                </p>
                <button style={{margin: 20, padding: 5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer />
            </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

Como o IronPDF só funciona com Node.js, o próximo passo é adicionar uma API para o aplicativo onde o PDF é gerado usando Node.js

Crie um arquivo pdf.js na pasta pages/api e adicione o código abaixo:

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key 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.log('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 = "Add Your Key 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.log('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

Observação: No código acima, adicione sua própria chave de licença.

Execute seu aplicativo: Inicie seu aplicativo Next.js:

npm run dev

npm run dev

SHELL

yarn dev

yarn dev

SHELL

SAÍDA

Abra seu navegador e acesse http://localhost:3000 para visualizar o site abaixo:

toastify npm (How It Works For Developers): Figure 4 - React-Toastify application running on localhost port:3000 and displaying a button "Show Toasts", along with a text-field for "Enter URL To Convert to PDF" and a "Generate PDF" button.

Agora clique no botão "Mostrar notificações" para ver as mensagens de notificação.

Agora, insira o endereço de um site para gerar um PDF e clique em "Gerar PDF". Um arquivo chamado awesomeIron.pdf será baixado.

toastify npm (Como Funciona para Desenvolvedores): Figura 6 - PDF de saída gerado convertendo o URL especificado para PDF usando IronPDF

Licença IronPDF

Para obter informações sobre a licença do IronPDF , consulte a página de Licenciamento do IronPDF .

Insira a chave de licença no aplicativo conforme mostrado abaixo:

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

Conclusão

React-toastify é uma biblioteca poderosa e fácil de usar para adicionar notificações toast aos seus aplicativos React. Com sua ampla gama de recursos e opções de personalização, você pode aprimorar a experiência do usuário, fornecendo feedback em tempo real de maneira extremamente fácil e não intrusiva. Por outro lado, o IronPDF é de longe a biblioteca empresarial mais versátil, com suporte para gerar, editar e gerenciar documentos PDF. Seguindo os passos descritos neste artigo, você poderá integrar rapidamente o React-toastify e o IronPDF ao seu projeto e começar a aproveitar seus recursos.

Para obter mais informações sobre como começar a usar o IronPDF, consulte a página de documentação e os exemplos de código .

Curtis Chau

Converse agora mesmo com a equipe de engenharia.

Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.

...