嵌入位圖與圖片
import {PdfDocument} from "@ironsoftware/ironpdf";
import fs from 'fs';

(async () => {
    // Image file path
    const filePath = 'iron.png';

    // Read bytes from a file using fs.readFile
    fs.readFile(filePath, (err, data) => {
    if (err) {
        console.error('Error reading file:', err);
        return;
    }

    let binaryString = '';
    data.forEach((byte) => {
        binaryString += String.fromCharCode(byte);
      });

    // Convert the binary string to base64
    const base64String = btoa(binaryString);

    // Insert base64 to img element
    const imgHtml = `<img src='data:image/png;base64,${base64String}'>`;

    // Render HTML content with the embedded image to a PDF
    const pdf = PdfDocument.fromHtml(imgHtml).then(
        (returnedPdf)=>{
            // Save the PDF
            returnedPdf.saveAs("embedded_example_1.pdf")
        });
    });
})();
npm i @ironsoftware/ironpdf
嵌入位圖與圖片

嵌入位圖與圖片

為確保HTML內容不需透過網路連線取得資料,可以將圖片以base64嵌入HTML。 將圖片嵌入HTML為base64需要載入圖片並將其資訊轉換為base64。

以下是一個完整的範例,展示如何讀取圖像文件,將其轉換為base64字串,然後將其嵌入到HTML文件中。 最後,展示如何使用IronPDF從該HTML生成PDF。

說明:

  1. 圖片轉換為Base64編碼:

    • encodeImageToBase64(filePath):一個函式,用於讀取圖像文件並將其異步轉換為base64字串。
    • 使用fs.readFile讀取圖像文件。如果成功,將資料轉換為base64字串並解決它。
  2. HTML內容設置:

    • img標籤中。
  3. PDF生成:

    • IronPdf建立PDF來協調流程。
    • 使用IronPdf.PdfDocument.fromHtml從HTML內容生成PDF文件。
    • 使用pdf.saveAs保存生成的PDF。
  4. 執行:

    • 使用所需圖像文件的路徑調用generatePdf。

此腳本有效地結合了讀取圖片、將其轉換為base64以便HTML嵌入,並使用IronPDF渲染PDF。

探索完整的Base64圖片嵌入範例
在 GitHub 上查看

準備好開始了嗎?

版本:2026.11剛剛發布