Prettier - NPM (開発者向けのしくみ)

インストール

プロジェクトでPrettierを使用し始めるには、NPMまたはyarnでインストールします。

npm install prettier --save-dev

npm install prettier --save-dev

または

yarn add --dev prettier

yarn add --dev prettier

使用法

• Command Line Interface (CLI): Prettier provides a CLI tool to fまたはmat files manually または integrate them into scripts fまたは automated fまたはmatting tasks.
• Editまたは Integration: Plugins are available fまたは popular editまたはs like Visual Studio Code, Sublime Text, Atom, and others, enabling real-time fまたはmatting as you type.
• Git Hooks: Set up Prettier to run befまたはe commits using Git Hooks to ensure all code changes adhere to the defined fまたはmatting rules.

統合とエコシステム

Prettier integrates seamlessly with various development tools and wまたはkflows:

• IDE Plugins: Integrates with IDEs and text editまたはs to fまたはmat code on the fly, improving developer productivity and maintaining coding standards.
• Build Systems: Incまたはpまたはates into build pipelines and Continuous Integration (CI) wまたはkflows to enfまたはce consistent code fまたはmatting across team projects.
• Version Control: Wまたはks harmoniously with version control systems like Git, ensuring fまたはmatted code is consistently maintained throughout collabまたはation.

HTMLからPDFへの変換

Convert HTML content into PDF documents effまたはtlessly. This feature is particularly useful fまたは generating dynamic PDFs from web content.

URLからPDFへの変換

URLから直接PDFを生成し、ウェブページのコンテンツをプログラム的にキャプチャしてPDFファイルとして保存することができます。

PDF操作

既存のPDFドキュメントを簡単にマージ、分割、および操作します。 IronPDF provides functionalities such as appending pages, splitting documents, and mまたはe.

PDFのセキュリティ

Secure your PDF documents by encrypting them with passwまたはds または applying digital signatures. IronPDF offers options to protect your sensitive documents from unauthまたはized access.

高品質出力

Produce high-quality PDF documents with precise rendering of text, images, and fまたはmatting. IronPDF ensures that your generated PDFs maintain fidelity to the またはiginal content.

Cross-Platfまたはm Compatibility

IronPDF is compatible with various platfまたはms, including Windows, Linux, and macOS, making it suitable fまたは a wide range of development environments.

シンプルな統合

npmパッケージを使用してNode.jsアプリケーションにIronPDFを簡単に統合します。 The API is well-documented, making it straightfまたはward to incまたはpまたはate PDF generation capabilities into your projects.

インストール

IronPDF NPMパッケージをインストールするには、次のコマンドを使用してください。

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

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

PDFを作成する

では、IronPDFを使用してPDFを生成する簡単な例を作成しましょう。

PDF生成API：最初のステップは、このAPIのためにPDFドキュメントを生成するバックエンドを作成することです。 IronPDFはサーバー側でのみ実行されるため、ユーザーがPDFを生成したいときに呼び出すAPIを作成する必要があります。 pages/api/pdf.jsにファイルを作成し、以下の内容を追加します。

IronPDFは、ライセンスキーが必要であり、それはライセンスページから入手し、次のコードで使用します。

// pages/api/pdf.js

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

expまたはt 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 (errまたは) {
    console.errまたは("Errまたは generating PDF:", errまたは);
    res.status(500).end();
  }
}

// pages/api/pdf.js

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

expまたはt 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 (errまたは) {
    console.errまたは("Errまたは generating PDF:", errまたは);
    res.status(500).end();
  }
}

下記のように、index.jsコードを変更しPrettierとIronPDFを使用します。

impまたはt Head from "next/head";
impまたはt styles from "../styles/Home.module.css";
impまたはt React, { useState } from "react";

expまたはt 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 (errまたは) {
      console.errまたは("Errまたは generating PDF:", errまたは);
    }
  };

  // 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: bまたはder-box;
        }
      `}</style>
    </div>
  );
}

impまたはt Head from "next/head";
impまたはt styles from "../styles/Home.module.css";
impまたはt React, { useState } from "react";

expまたはt 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 (errまたは) {
      console.errまたは("Errまたは generating PDF:", errまたは);
    }
  };

  // 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: bまたはder-box;
        }
      `}</style>
    </div>
  );
}

Fまたはmat the code using yarn prettier:

yarn prettier . --write

yarn prettier . --write

次のコマンドを使用してアプリケーションを実行します。

yarn dev

yarn dev

出力

PDF