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

Tailwind npm (Como funciona para desenvolvedores)

Curtis Chau

Updated: 18 de janeiro de 2026

Tailwind CSS é um framework CSS popular, focado em utilitários, que permite criar páginas HTML rapidamente. É altamente personalizável e funciona perfeitamente com o React , uma poderosa biblioteca JavaScript para a construção de interfaces de usuário. Neste artigo, vamos orientá-lo no processo de integração do Tailwind CSS em um projeto React usando o npm. Além disso, vamos analisar a biblioteca IronPDF para gerar PDFs a partir de URLs de sites.

O que é Tailwind CSS?

Tailwind CSS é um framework CSS focado em utilitários que permite criar aplicações de forma mais eficiente. Com o Tailwind, você pode controlar layout, cor, espaçamento, tipografia, sombras e muito mais usando classes utilitárias diretamente no seu HTML. A melhor parte? Você não precisará escrever CSS personalizado!

Se você está cansado de lidar com nomes de classes semânticas tradicionais, experimente o Tailwind CSS — você pode se perguntar como conseguiu trabalhar com CSS de outra forma!

A seguir estão os passos para integrar o Tailwind CSS em uma aplicação React.

Passo 1: Criar um projeto React

Crie um aplicativo React usando o seguinte comando. Esta ferramenta configura um novo projeto React com uma configuração padrão adequada.

npx create-react-app my-tailwind-react-app
cd my-tailwind-react-app

npx create-react-app my-tailwind-react-app
cd my-tailwind-react-app

SHELL

Passo 2: Instale o Tailwind CSS

Instale o Tailwind CSS e suas dependências usando o npm . Abra o terminal e execute o seguinte comando:

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

SHELL

Etapa 3: Inicializar o Tailwind CSS

Em seguida, você precisa inicializar o Tailwind CSS para criar os arquivos de configuração padrão. Execute o seguinte comando:

npx tailwindcss init -p

npx tailwindcss init -p

SHELL

Isso criará dois novos arquivos em seu projeto: tailwind.config.js e postcss.config.js .

Etapa 4: Configurar o Tailwind CSS

Abra o arquivo de configuração tailwind.config.js e defina a opção purge para remover o CSS não utilizado em produção. Isso ajuda a manter seu pacote CSS final pequeno. Você também pode definir o nome da classe do modo escuro e o caminho para os módulos personalizados aqui.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

JavaScript

Passo 5: Criar um arquivo CSS do Tailwind

Crie um novo arquivo chamado src/tailwind.css e adicione o seguinte conteúdo a ele:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Text

Passo 6: Importe o Tailwind CSS para o seu projeto React.

Abra o arquivo src/index.js e importe o arquivo Tailwind CSS que você acabou de criar:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Existing CSS imports
import App from './App';
import './tailwind.css'; // Tailwind CSS import

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Existing CSS imports
import App from './App';
import './tailwind.css'; // Tailwind CSS import

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

JavaScript

Passo 7: Comece a usar o Tailwind CSS

Agora você pode começar a usar as classes CSS do Tailwind no código dos seus componentes React. Abra o arquivo src/App.js e modifique-o da seguinte maneira:

import React from 'react';

function App() {
  return (
    <div className="text-center min-h-screen flex items-center justify-center">
      <header className="bg-blue-500 text-white p-8 rounded">
        <h1 className="text-4xl font-bold">Welcome to Tailwind CSS in React</h1>
        <p className="mt-4">This is a sample application using Tailwind CSS with React.</p>
      </header>
    </div>
  );
}

export default App;

import React from 'react';

function App() {
  return (
    <div className="text-center min-h-screen flex items-center justify-center">
      <header className="bg-blue-500 text-white p-8 rounded">
        <h1 className="text-4xl font-bold">Welcome to Tailwind CSS in React</h1>
        <p className="mt-4">This is a sample application using Tailwind CSS with React.</p>
      </header>
    </div>
  );
}

export default App;

JavaScript

Etapa 8: Execute seu projeto React

Por fim, inicie o servidor de desenvolvimento para ver o Tailwind CSS em ação:

npm start

npm start

SHELL

Seu aplicativo agora deve estar funcionando com o Tailwind CSS integrado. Você pode começar a usar as classes utilitárias do Tailwind para estilizar seus componentes React facilmente.

Introdução ao IronPDF

IronPDF é uma biblioteca popular usada para gerar, editar e converter documentos PDF em diversos ambientes de programação. O pacote IronPDF NPM foi projetado especificamente para aplicações Node.js

Aqui estão alguns recursos e detalhes importantes sobre o pacote IronPDF NPM:

Principais características

Conversão de HTML para PDF

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

Conversão de URL para PDF

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

Manipulação de PDF

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

Segurança de 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.

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.

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.

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.

Instalação

Para instalar o pacote NPM do IronPDF , use o seguinte comando:

> npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

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

Configurar um projeto Next.js

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 tailwind-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

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

cd tailwind-pdf

SHELL

Instale os pacotes necessários:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

SHELL

As instruções acima criarão um arquivo tailwind.config.js conforme abaixo:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

JavaScript

Adicione o seguinte código ao arquivo global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Text

Abra ou crie o arquivo _app.js e inclua o arquivo global.css conforme mostrado abaixo:

// These styles apply to every route in the application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// These styles apply to every route in the application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

JavaScript

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:

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 chamada de API quando um usuário deseja gerar um PDF. Crie um arquivo no caminho pages/api/pdf.js e adicione o conteúdo abaixo.

O IronPDF 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";

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

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

Agora modifique o código index.js para usar o Tailwind CSS:

import Head from 'next/head';
import { useState } from "react";

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

    // Function to generate PDF from the given URL
    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);
        }
    };

    // Handle change in text input for URL
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div>
            <Head>
                <title>Demo Tailwind and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className='text-center'>
                <h1 className='text-blue-500 text-4xl p-6 mt-12' >
                    Demo Tailwind and Generate PDF From IronPDF
                </h1>
                <p className='w-full text-center'>
                    <span className='px-4 text-xl border-gray-500'>
                        Enter URL To Convert to PDF:
                    </span>{" "}
                </p>
                <input 
                    type="text" 
                    className="border p-2 m-4"
                    value={textInput}
                    onChange={handleChange} 
                    placeholder="Enter URL here" 
                />
                <button 
                    className='rounded-sm bg-blue-800 p-2 m-12 text-xl text-white' 
                    onClick={generatePdf}
                >
                    Generate PDF
                </button>
            </main> 
        </div>
    );
}

import Head from 'next/head';
import { useState } from "react";

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

    // Function to generate PDF from the given URL
    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);
        }
    };

    // Handle change in text input for URL
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div>
            <Head>
                <title>Demo Tailwind and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className='text-center'>
                <h1 className='text-blue-500 text-4xl p-6 mt-12' >
                    Demo Tailwind and Generate PDF From IronPDF
                </h1>
                <p className='w-full text-center'>
                    <span className='px-4 text-xl border-gray-500'>
                        Enter URL To Convert to PDF:
                    </span>{" "}
                </p>
                <input 
                    type="text" 
                    className="border p-2 m-4"
                    value={textInput}
                    onChange={handleChange} 
                    placeholder="Enter URL here" 
                />
                <button 
                    className='rounded-sm bg-blue-800 p-2 m-12 text-xl text-white' 
                    onClick={generatePdf}
                >
                    Generate PDF
                </button>
            </main> 
        </div>
    );
}

JavaScript

Agora execute o aplicativo usando o comando:

yarn dev

yarn dev

SHELL

Saída para Tailwind CSS e IronPDF

tailwind npm (Como Funciona Para Desenvolvedores): Figura 1 - Página de saída para Tailwind e aplicação IronPDF Next.js

Clique no botão "Gerar PDF" para gerar o PDF a partir do URL fornecido.

tailwind npm (Como Funciona Para Desenvolvedores): Figura 2 - PDF de saída gerado a partir do URL usando o pacote IronPDF

Licença IronPDF

Página do IronPDF .

Insira a chave de licença aqui:

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

Integrar o Tailwind CSS em um projeto React com npm é muito simples. Seguindo esses passos, você pode configurar rapidamente o Tailwind CSS e começar a usar suas classes utilitárias para criar interfaces de usuário responsivas e personalizáveis. A flexibilidade e as poderosas opções de personalização do Tailwind CSS o tornam uma excelente escolha para desenvolvedores React que buscam simplificar seu processo de estilização. O IronPDF é um pacote versátil para geração de PDFs que ajuda os desenvolvedores a integrá-lo facilmente em aplicativos corporativos. Dominar essas duas tecnologias permite que os desenvolvedores criem aplicativos modernos e repletos de recursos.

Para obter mais informações sobre como começar a usar o IronPDF e exemplos de código de referência para diferentes maneiras de incorporá-lo ao seu projeto, visite a página de exemplos de código e documentação. O IronPDF oferece suporte e opções de atualização para todos os detentores de licenças perpétuas. Oferece também suporte técnico 24 horas por dia, 5 dias por semana, durante o período de teste.

Note que não são necessárias informações de cartão de crédito nem criação de conta para a licença de avaliação gratuita , apenas um endereço de e-mail válido.

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.

...