Web-Printing-Toolkit/js/print_handler.js

import Printer from "../node_modules/@digasystems/ipp-browser/dist/ipp-browser.js";
import decodeResponse from "../node_modules/@digasystems/ipp-browser/dist/ipp-browser.js";
import axios from "../node_modules/axios/dist/esm/axios.js";
import { Buffer } from "./buffer603.js";


// Get the canvas element
const canvas = document.getElementById("print_canvas");

export function testModule() {
    console.log("Print Handler running");
}

export function doIPPprint(targetURL) {
    let url = targetURL;
    let printer = new Printer(url);
    console.log(printer);
    // Ensure the canvas exists
    if (canvas && canvas instanceof HTMLCanvasElement) {
        // Export the canvas content to a Blob
        canvas.toBlob((blob) => {
            if (!blob) {
                console.error("Failed to create Blob from canvas.");
                return;
            }

            // Use FileReader to read the Blob as an ArrayBuffer
            const reader = new FileReader();
            reader.onload = function (event) {
                const arrayBuffer = event.target.result; // Get the ArrayBuffer

                // Convert ArrayBuffer to Buffer
                const buffer = Buffer.from(arrayBuffer);

                let msg = {
                    "operation-attributes-tag": {
                        "document-format": "image/png",
                        //    "requesting-user-name": "Web user"
                    },
                    data: buffer,
                };

                axios
                    .post(url, printer.encodeMsg("Print-Job", msg), {
                        headers: printer.getHeaders(),
                    })
                    .then((response) => {
                        // This section aims to handle the sevres response. It is not finished.
                        console.log("!!!");
                        console.log(response.data);
                        let da = response.data;
                        da = da.split("ipp://")[1].split("!")[0];
                        da = "ipp://" + da;
                        console.log(da);
                        let msgQuery = {
                            "operation-attributes-tag": {
                                "attributes-charset": "utf-8",
                                "attributes-natural-language": "en-us",
                                "job-uri": da, // Or you can use "job-id" and "printer-uri" instead
                            },
                        };

                        axios
                            .post(url, printer.encodeMsg("Get-Job-Attributes", msgQuery), {
                                headers: printer.getHeaders(),
                                responseType: "arraybuffer",
                            })
                            .then((response) => {
                                // Output the variable type of response
                                // grab job-state-reasons and job-state from binary reponse
                                const data = Buffer.from(response.data); // Convert to Buffer
                                let dec = new decodeResponse(data);
                                console.log(dec);
                                const ippResponse = parseIPPResponse(data);
                                console.log(ippResponse);

                                const jobStateAttribute = ippResponse.attributes.find(
                                    (attr) => attr.name === "job-state"
                                );

                                if (jobStateAttribute) {
                                    console.log(`Job State: ${jobStateAttribute.value}`);
                                } else {
                                    console.log("Job State attribute not found.");
                                }
                            });
                        //
                    })
                    .catch((error) => {
                        console.log(error);
                        // alert("An issue occured while printing.")
                    });
            };

            reader.onerror = function () {
                console.error("Error reading Blob as ArrayBuffer.");
            };

            reader.readAsArrayBuffer(blob);
        }, "image/png"); // Change MIME type if needed
    } else {
        console.error(
            'Canvas element with id "badge" not found or is not a canvas.'
        );
    }
}

class IPPStatus {
    static SUCCESS = 0x0000;

    static CLIENT_ERROR = 0x0400;

    static SERVER_ERROR = 0x0500;
}

class IPPAttribute {
    constructor(name, value) {
        this.name = name;

        this.value = value;
    }
}

class IPPResponse {
    constructor(version, statusCode, requestId, attributes) {
        this.version = version;

        this.statusCode = statusCode;

        this.requestId = requestId;

        this.attributes = attributes;
    }
}

function parseIPPResponse(data) {
    const version = data.readUInt16BE(0);

    const statusCode = data.readUInt16BE(2);

    const requestId = data.readUInt32BE(4);

    const length = data.readUInt32BE(8);

    const attributes = [];

    let offset = 12; // Start after the header

    while (offset < length + 12) {
        const tag = data.readUInt8(offset);

        const nameLength = data.readUInt16BE(offset + 1);

        const valueLength = data.readUInt32BE(offset + 3);

        const name = data.toString("utf8", offset + 5, offset + 5 + nameLength);

        const value = data.toString(
            "utf8",
            offset + 5 + nameLength,
            offset + 5 + nameLength + valueLength
        );

        attributes.push(new IPPAttribute(name, value));

        offset += 5 + nameLength + valueLength; // Move to the next attribute
    }

    return new IPPResponse(version, statusCode, requestId, attributes);
}