NODE 說明

Hashids NPM（開發者的使用方法）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

更新日期:6月 22, 2025

在現代 web 應用程序中，確保數據安全和隱私至關重要。保護敏感信息（如數據庫 ID 或 URL）的有效方法之一是使用 Hashids，這是一個 JavaScript 加密庫，它將數字數據轉換為獨特的、可逆的加密哈希。本文探討了如何將 Hashids 無縫集成到您的 React 應用程序中，以模糊化和解碼識別符。

什麼是 Hashids？

Hashids 是一個小型而強大的庫，它將數字數據轉換為哈希字符串。主要目標是模糊數字標識符，以防止敏感信息暴露。這種轉換是可逆的，使得能夠在需要時檢索原始數字數據。 Hashids 是一個 JavaScript 庫，用於從數字生成類似 YouTube 的 ID，編碼敏感數據，或安全地向用戶公開數據庫 ID，或僅僅從數字中模糊化 ID。

在您的 React 應用程序中集成 Hashids

要將 Hashids 集成到您的 React 應用程序中，請按照以下步驟進行：

步驟 1：安裝 Hashids npm

首先，在您的 React 項目中通過 npm 安裝 Hashids：

npm install hashids
# or
yarn add hashids

npm install hashids
# or
yarn add hashids

SHELL

步驟 2：初始化 Hashids 實例

在您的 React 組件或實用工具文件中，使用鹽和可選的最小哈希長度初始化新的 Hashids 實例：

import { useState, useEffect } from 'react';
import Hashids from 'hashids';

// React component demonstrating Hashids integration
const MyComponent = () => {
  const [hashids, setHashids] = useState(null);

  useEffect(() => {
    // Initialize the Hashids library with a custom salt string and minimum hash length of 8
    const initHashids = new Hashids('your_salt_here', 8); // Replace 'your_salt_here' with your actual salt or configure custom alphabet
    setHashids(initHashids);
  }, []);

  // Other component logic here
  return (
    <div>
      {/* Your JSX content */}
    </div>
  );
};

export default MyComponent;

import { useState, useEffect } from 'react';
import Hashids from 'hashids';

// React component demonstrating Hashids integration
const MyComponent = () => {
  const [hashids, setHashids] = useState(null);

  useEffect(() => {
    // Initialize the Hashids library with a custom salt string and minimum hash length of 8
    const initHashids = new Hashids('your_salt_here', 8); // Replace 'your_salt_here' with your actual salt or configure custom alphabet
    setHashids(initHashids);
  }, []);

  // Other component logic here
  return (
    <div>
      {/* Your JSX content */}
    </div>
  );
};

export default MyComponent;

JAVASCRIPT

用唯一字符串（鹽）替換 'your_salt_here'，以自定義哈希輸出。

步驟 3：編碼和解碼數據

初始化後，您可以使用 Hashids 編碼和解碼數字數據。例如，編碼數據庫 ID：

const encodedId = hashids.encode(12345); // Example: 'B0zGbvA9' non-sequential IDs

const encodedId = hashids.encode(12345); // Example: 'B0zGbvA9' non-sequential IDs

JAVASCRIPT

並將其解碼回原始 ID：

const decodedIds = hashids.decode('B0zGbvA9'); // Example: [12345]

const decodedIds = hashids.decode('B0zGbvA9'); // Example: [12345]

JAVASCRIPT

步驟 4：在組件中使用 Hashids

在需要的地方在您的 React 組件中集成 Hashids。例如，作為道具傳遞哈希 ID：

const MyComponent = ({ id }) => {
  // Encode ID using Hashids if the hashids instance is initialized
  const encodedId = hashids ? hashids.encode(id) : '';

  return (
    <div>
      <p>Encoded ID: {encodedId}</p>
      {/* Other JSX content */}
    </div>
  );
};

const MyComponent = ({ id }) => {
  // Encode ID using Hashids if the hashids instance is initialized
  const encodedId = hashids ? hashids.encode(id) : '';

  return (
    <div>
      <p>Encoded ID: {encodedId}</p>
      {/* Other JSX content */}
    </div>
  );
};

JAVASCRIPT

在 React 中使用 Hashids 的好處

安全性：Hashids 模糊數字 ID，通過阻止直接映射到敏感信息來增強數據隱私和安全性。
易於集成：簡單的 npm 安裝和簡單的 API 使得 Hashids 可以輕鬆實現在 React 應用程序中。
靈活性：可自定義的哈希長度和鹽提供了靈活性，能夠根據您的應用程序的安全需求調整哈希。

介紹 IronPDF

IronPDF for Node.js 是 Iron Software 的一個強大 Node.js PDF 庫，可讓開發者在其 .NET 項目中生成和編輯 PDF。無論您是需要從 HTML 創建 PDF、操作現有 PDF，還是將網頁轉換為 PDF 格式，IronPDF 都能滿足您的需求。

Hashids NPM（開發人員如何使用）：圖 1 - IronPDF for Node.js：Node.js PDF 庫

關鍵特性

HTML 到 PDF 轉換

輕鬆將 HTML 內容轉換為 PDF 文件。此功能特別適用於從網絡內容生成動態 PDF。

URL 到 PDF 轉換

直接從 URL 生成 PDF，讓您能夠捕獲網頁的內容並以編程方式將其保存為 PDF 文件。

PDF 操作

輕鬆合併、分割和操作現有 PDF 文件。 IronPDF 提供了如附加頁面、拆分文檔等功能。

PDF 安全

通過使用密碼加密或應用數字簽名來保護您的 PDF 文件。 IronPDF 提供了選項，讓您可以保護您的敏感文檔免遭未授權訪問。

高質量輸出

生成高質量的 PDF 文檔，精確呈現文本、圖像和格式。 IronPDF 確保您的生成的 PDF 維持原內容的忠實度。

跨平臺兼容性

IronPDF 兼容諸如 Windows、Linux 和 macOS 等多個平台，使之適合於廣泛的開發環境。

簡單集成

輕鬆將 IronPDF 集成到您的 Node.js 應用程序中，使用其 npm 包。 API 文檔詳實，使得在您的項目中集成 PDF 生成功能變得直觀簡單。

安裝

要安裝 IronPDF NPM 包，請使用以下命令：

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

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

SHELL

使用 IronPDF 生成 PDF 文檔並使用 HashIDs NPM 包

安裝依賴項：首先，創建一個新的 Next.js 項目（如果尚未創建），使用以下命令：請參考這裡

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

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

SHELL

接下來，導航到您的項目目錄：

cd hashids-pdf

cd hashids-pdf

SHELL

安裝所需的包：

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

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

SHELL

創建 PDF

現在，我們來創建一個簡單的示例，使用 IronPDF 生成 PDF。在您的 Next.js 組件中（例如，pages/index.tsx），添加以下代碼：

PDF 生成 API：第一步是創建一個後端 API 以生成 PDF 文件。由於 IronPDF 僅在服務器端運行，我們需要創建一個 API，以便用戶想要生成 PDF 時調用。在路徑中創建一個文件 pages/api/pdf.js，並添加以下內容。

IronPDF 需要一個許可證密鑰，您可以從許可證頁面獲取，並將其放置在以下代碼中。

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

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
    const f = req.query.f;
    const l = initHashids.encode(f);

    let content = "<h1>Demo Hashids and Generate PDF Using IronPDF</h1>";
    content += "<p>Input:" + f + "</p>";
    content += "<p>HashID:" + l + "</p>";

    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();

    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";
import Hashids from 'hashids';

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
    const f = req.query.f;
    const l = initHashids.encode(f);

    let content = "<h1>Demo Hashids and Generate PDF Using IronPDF</h1>";
    content += "<p>Input:" + f + "</p>";
    content += "<p>HashID:" + l + "</p>";

    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();

    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

現在修改 index.js 代碼如下以使用 hashID 和 IronPDF。

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

export default function Home() {
  const [text, setText] = useState("");
  const [etext, seteText] = useState("");
  const [hashids, setHashids] = useState(null);

  // Initialize Hashids on component mount
  useEffect(() => {
    const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
    setHashids(initHashids);
  }, []);

  // Generate PDF by calling backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?f=" + 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 text change and encode input number
  const handleChange = (event) => {
    seteText(hashids ? hashids.encode(event.target.value) : '');
    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 Hashids and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To get Hashids and Convert to PDF:</span>{" "}
        </p>
        <input type="number" value={text} onChange={handleChange} />
        <p>
          HashID of input: {etext}
        </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;
        }
        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 React, { useState, useEffect } from "react";
import Hashids from 'hashids';

export default function Home() {
  const [text, setText] = useState("");
  const [etext, seteText] = useState("");
  const [hashids, setHashids] = useState(null);

  // Initialize Hashids on component mount
  useEffect(() => {
    const initHashids = new Hashids('IronPDF Is Awesome and this is the salt', 8);
    setHashids(initHashids);
  }, []);

  // Generate PDF by calling backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?f=" + 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 text change and encode input number
  const handleChange = (event) => {
    seteText(hashids ? hashids.encode(event.target.value) : '');
    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 Hashids and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To get Hashids and Convert to PDF:</span>{" "}
        </p>
        <input type="number" value={text} onChange={handleChange} />
        <p>
          HashID of input: {etext}
        </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;
        }
        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

代碼說明

用戶通過輸入文本框輸入數字。
輸入的數字使用 HashID 進行編碼並顯示。
當用戶點擊"生成 PDF"時，輸入文本被發送到一個後端 API，該 API 會編碼並生成一個 PDF 文檔。

輸出

Hashids NPM（開發人員如何使用）：圖 2

PDF

Hashids NPM（開發人員如何使用）：圖 3

IronPDF 許可證

IronPDF。

在這裡放置許可證密鑰：

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