Prettier - NPM (Wie es für Entwickler funktioniert)

Installation

Um Prettier in Ihren Projekten zu verwenden, können Sie es über NPM oder Yarn installieren:

npm install prettier --save-dev

npm install prettier --save-dev

oder

yarn add --dev prettier

yarn add --dev prettier

Nutzung

• Befehlszeilenschnittstelle (CLI): Prettier bietet ein CLI-Tool, mit dem Dateien manuell formatiert oder in Skripte für automatisierte Formatierungsaufgaben integriert werden können.
• Editorintegration: Für gängige Editoren wie Visual Studio Code, Sublime Text, Atom und andere stehen Plugins zur Verfügung, die eine Echtzeitformatierung während der Eingabe ermöglichen.
• Git Hooks: Prettier wird so konfiguriert, dass es vor Commits ausgeführt wird. Mithilfe von Git Hooks wird sichergestellt, dass alle Codeänderungen den definierten Formatierungsregeln entsprechen.

Integrationen und Ökosystem

Prettier integriert sich nahtlos mit verschiedenen Entwicklungstools und Workflows:

• IDE-Plugins: Integriert sich in IDEs und Texteditoren, um Code direkt zu formatieren, wodurch die Produktivität der Entwickler gesteigert und die Einhaltung von Codierungsstandards sichergestellt wird.
• Build-Systeme: Integriert sich in Build-Pipelines und Continuous-Integration-Workflows (CI), um eine einheitliche Codeformatierung über alle Teamprojekte hinweg zu gewährleisten.
• Versionskontrolle: Funktioniert reibungslos mit Versionskontrollsystemen wie Git und gewährleistet so, dass formatierter Code während der gesamten Zusammenarbeit konsistent beibehalten wird.

HTML-zu-PDF-Konvertierung

Konvertieren Sie HTML-Inhalte mühelos in PDF-Dokumente. Dieses Feature ist besonders nützlich zur Erzeugung dynamischer PDFs aus Webinhalten.

URL zu PDF-Konvertierung

Erzeugen Sie PDFs direkt von URLs, sodass Sie die Inhalte von Webseiten erfassen und als PDF-Dateien programmatisch speichern können.

PDF-Manipulation

Verschmelzen, teilen und manipulieren Sie vorhandene PDF-Dokumente mit Leichtigkeit. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Splitten von Dokumenten und mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen zum Schutz Ihrer sensiblen Dokumente vor unberechtigtem Zugriff.

Hohe Ausgabequalität

Erzeugen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Erzeugungsfunktionen in Ihre Projekte einzubauen.

Installation

Um das IronPDF NPM-Paket zu installieren, verwenden Sie den folgenden Befehl:

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

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

Erstellen eines PDFs

Nun erstellen wir ein einfaches Beispiel für die Erstellung eines PDFs mit IronPDF.

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Generierung des PDF-Dokuments zu erstellen. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF generieren möchte. Erstellen Sie eine Datei unter pages/api/pdf.js und fügen Sie den unten stehenden Inhalt ein.

IronPDF benötigt einen Lizenzschlüssel, der von der Lizenzseite erhalten und im folgenden Code verwendet werden kann.

// 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();

    // 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 (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();

    // 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 (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

Ändern Sie nun den index.js Code so, dass er Prettier und IronPDF verwendet, wie unten gezeigt.

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

export 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 (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // 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: border-box;
        }
      `}</style>
    </div>
  );
}

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

export 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 (error) {
      console.error("Error generating PDF:", error);
    }
  };

  // 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: border-box;
        }
      `}</style>
    </div>
  );
}

Formatieren Sie den Code mit Yarn Prettier:

yarn prettier . --write

yarn prettier . --write

Führen Sie nun die Anwendung mit dem Befehl aus:

yarn dev

yarn dev

Ausgabe

PDF