Version: 2023.11

Embedding Bitmaps and Images

Screen: Indicates that CSS rules are intended for on-screen viewing. Styles are optimized for digital screens, which typically include considerations like colors and layouts that look good on computer monitors.
Print: Instructs the browser to apply styles tailored for printed documents. This means the CSS rules are optimized for printing, ensuring readability and proper formatting when the HTML content is printed on physical media, like paper.

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")
        });
    });
})();

Embedding Bitmaps and Images

To ensure that HTML content does not require an internet connection to retrieve data, images can be embedded into HTML as base64. Embedding an image in HTML as base64 requires loading the image and converting its information to base64.

The code above uses the fs.readFile function to read the image file asynchronously. Inside the file reading callback, it converts the binary data from the image file into a binary string using a loop. This binary string is then converted into a base64-encoded string using the btoa function in JavaScript.

Construct an HTML img element with the src attribute set to the base64-encoded image data. Afterward, utilize IronPDF's PdfDocument.fromHtml method to render the HTML content, including the embedded image, and generates a PDF document.

Finally, save the resulting PDF.