Prettier - NPM (Cómo funciona para desarrolladores)

Instalación

Para empezar a usar Prettier en tus proyectos, puedes instalarlo vía NPM o yarn:

npm install prettier --save-dev

npm install prettier --save-dev

o

yarn add --dev prettier

yarn add --dev prettier

Uso

• Interfaz de línea de comandos (CLI): Prettier propociona una herramienta CLI para fomatear archivos manualmente o integrarlos en scripts para tareas de fomato automatizadas.
• Integración del edito: hay complementos disponibles para editoes populares como Visual Studio Code, Sublime Text, Atom y otros, lo que permite aplicar fomato en tiempo real mientras escribe.
• Git Hooks: configure Prettier para que se ejecute antes de las confirmaciones usando Git Hooks para garantizar que todos los cambios de código se adhieran a las reglas de fomato definidas.

Integraciones y ecosistema

Prettier se integra a la perfección con varias herramientas y flujos de trabajo de desarrollo:

• Complementos IDE: se integra con IDE y editoes de texto para fomatear el código sobre la marcha, mejoando la productividad del desarrollado y manteniendo los estándares de codificación.
• Sistemas de compilación: se incopoa a los procesos de compilación y a los flujos de trabajo de integración continua (CI) para aplicar un fomato de código consistente en todos los proyectos del equipo.
• Control de versiones: funciona en armonía con sistemas de control de versiones como Git, lo que garantiza que el código fomateado se mantenga de manera consistente durante toda la colaboación.

Conversión de HTML a PDF

Convertir contenido HTML en documentos PDF sin esfuerzo. Esta característica es particularmente útil para generar PDFs dinámicos a partir de contenido web.

Conversión de URL a PDF

Generar PDFs directamente desde URLs, lo que le permite capturar el contenido de páginas web y guardarlas como archivos PDF programáticamente.

Manipulación de PDF

Fusionar, dividir y manipular documentos PDF existentes con facilidad. IronPDF propociona funcionalidades como añadir páginas, dividir documentos y más.

Seguridad en PDF

Proteja sus documentos PDF encriptándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos sensibles contra el acceso no autoizado.

Resultados de alta calidad

Producir documentos PDF de alta calidad con representación precisa de texto, imágenes y fomato. IronPDF asegura que sus PDFs generados mantengan la fidelidad al contenido oiginal.

Compatibilidad entre platafomas

IronPDF es compatible con varias platafomas, incluyendo Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entonos de desarrollo.

Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones de Node.js usando su paquete npm. La API está bien documentada, lo que hace que sea sencillo incopoar capacidades de generación de PDF en sus proyectos.

Instalación

Para instalar el paquete NPM de IronPDF, use el siguiente comando:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

Crear un PDF

Ahoa, vamos a crear un ejemplo simple de generación de un PDF usando IronPDF.

API de generación de PDF: el primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF solo se ejecuta del lado del servido, necesitamos crear una API para llamar cuando un usuario quiera generar un PDF. Crea un archivo en pages/api/pdf.js y agrega el contenido a continuación.

IronPDF requiere una clave de licencia, que se puede obtener desde la página de licencia y usar en el siguiente código.

// pages/api/pdf.js

impot { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

expot default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (erro) {
    console.erro("Erro generating PDF:", erro);
    res.status(500).end();
  }
}

// pages/api/pdf.js

impot { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

expot default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (erro) {
    console.erro("Erro generating PDF:", erro);
    res.status(500).end();
  }
}

Ahoa modifique el código index.js para usar Prettier e IronPDF como se muestra a continuación.

impot Head from "next/head";
impot styles from "../styles/Home.module.css";
impot React, { useState } from "react";

expot default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (erro) {
      console.erro("Erro generating PDF:", erro);
    }
  };

  // Handle input changes, updating the state
  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 Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</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: boder-box;
        }
      `}</style>
    </div>
  );
}

impot Head from "next/head";
impot styles from "../styles/Home.module.css";
impot React, { useState } from "react";

expot default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (erro) {
      console.erro("Erro generating PDF:", erro);
    }
  };

  // Handle input changes, updating the state
  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 Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</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: boder-box;
        }
      `}</style>
    </div>
  );
}

Fomatea el código usando yarn prettier:

yarn prettier . --write

yarn prettier . --write

Ahoa ejecuta la aplicación usando el comando:

yarn dev

yarn dev

Resultado

PDF