zebra-sticker-print/sticker-print.js

const TEMPLATES = {
    "sticker-70x35": {
        name: "Sticker 70x35mm",
        content: `
            ^XA
            ^FX Template label 70x35mm

            ^FX --------- Agenzia Entrata logo
            ^FO20,85^GFA,2409,2409,33,,:::::I01LF8hL0806,I07LF8hK08812,I0MFChK0140B8,I0MFChI02384045E,001MFEhI0275802058,001MFEhI0AC6I0C44,001MFEhI0BFC004246,I0NFhH01768I0189,I0NFhI064K0C9,I07MF8hG0ACCK0E7C,J0MF8gI07V01B48K0422,L07JFCgI0FV02DDL0691,L0KFCgI0FW0EBI0800141,L0KFCgI0FV04FAI08001378,K01FI07EhG0FAL0102,K018J0Eh08F2I04I019,M03FE03J0FEF80FC03EFC03FFE03F8007F8P01E2L01414,L03IFEJ01IFC3FF03FFE03FFE07F801FFCP056O056,K01KFCI03IFC7FF83IF03FFE07F801FFEP01C5L01C42,K07LFI07C3F0F87C1F8F03FFE03F800E0FP0398M0648,K0MF800781E1E01E0F078387C0078J0FP03980041I0268,J03MFE00F00E1E01E0E07818F80078003FFP02B003C0E0017A,J07NF00F00E1IFE0E07801EI07800IFP03A08K0813C,J0OF80F00E1IFE0E07803CI07801IFP0D404J0100BC,I01OFC0F00E1IFE0E078078I07803E0FP0F4M0107C,I03OFC0701E1EJ0E0780F0E00780380FP0F8008L028,I03IF800IFE0783E0F00C1E0781F0E00780381FP0F0404001I039,I07FFCI01IF03FFE0IFE3F9FC3FFE0IFC3IFCO05060300200A91,I0IF8J0IF03FFE07FFE7F9FE3FFE0IFE3IFCN0130E0100201011,I0IFK07FF80FFE03FFC3F8FC3FFE0IFC1IFCO0B1B0200201511,001FFEK03FF8038E007CV038Q031BJ020141D,001FFCK01FFCI0EgS07B2M0D73,001FF8L0FFC001EgS03B1001CI0CCA,001QFC0FFEgS03F1003210104A,003QFC0FFCgR011F3J080124A,003QFE0FF8gS05FE01J0129,003QFE07CgT01EC0400180744,003QFEgX0FCM06D4,003QFEgW04ECM0DB,003QFEP0FU038O03ECM0BA8,003BPFEP0FU03CO01F402J01E9,003BPFEP0FU03CP0FAL017E,0033PFEP0FU03CP07AM058,0013PFEP0FU03CP03CM0E4,I03FCR01F3F003IF007E3F007F801IFC007F8I04DL034C,I03FCL07FF8003IFC07IF80FE7F83FFE03IFE01FFEI06F84I08089C,I03FCL03FF8003IFE0JF81JFC3IF03IFE03IF006241CI019804,00C3FFL03FFC003IFE07IF80JFC3IF01IFC07IF80021BCI01208,00C3FF8K03FFCI0FC1F00FJ01FE38I0F803CI07C0FC02605C004BC082,01E3FFEJ03IFCI0780F00FJ01FCK07803CI0F803C0320325IF001A,01E3IFE00JFEEI0700F00FJ01FJ07FF803CI0F003C0E881804870452,1FF1PFEFF00700F00FJ01EI01IF803CI0JFE03F400509818E4,7FF8PFE7F80700F00FJ01EI03IF803CI0JFE00780318604608,7FFCPFE7F80700F00FJ01EI07IF803CI0JFE014BDI26B433,IFE3OFC7FC0700F00FJ01EI0FC07803CI0FL049DA0D81404,JF1OFCFFC0700F00FJ01EI0F007803CI0FL021C0FEF0018,JF8OF1FFC0F00F00F01E01EI0F01F803C078FC01CI081E606FF6,JFE3MFC3FFC1FC1F80IFE0IFC0JFE03IF87IFEI078DC032,7JF0LFC1IF83FE3FC07FFE1IFE07JF03IF83IFEJ013001B8,7JFE1JF81JF83FE7FC03FFC1IFE03JF01IF01IFCJ03FI0F8,1KF8J03JFE01FC3FC01FE01IFC01FE7C007F8007FEL0E,,:::::^FS

            ^FX --------- QR Code image
            ^FO{qrCodeXpos},{qrCodeYpos}{qrCodeZPL}^FS

            ^FX --------- Company name
            ^CF0,30
            ^FO{companyNameXpos},{companyNameYpos}^FD{companyName}^FS

            ^FX --------- External MSID
            ^CFA,20
            ^FO{extMasterSystemIdXpos},{extMasterSystemIdYpos}^FDACS: {extMasterSystemId}^FS

            ^FX --------- Machine Model
            ^CFA,20
            ^FO{machineModelXpos},{machineModelYpos}^FD{machineModel}^FS

            ^FX --------- MSID label
            ^CFA,20
            ^FO{masterSystemIdXpos},{masterSystemIdYpos}^FDID ADE:^FS

            ^FX --------- MSID, max 22 chars
            ^CFA,20
            ^FO20,240^FD{masterSystemId}^FS

            ^XZ
        `,
        agencyLogo: {
            dimensions: {
                width: 260,
                height: 73,
            },
            pos: {
                x: 20,
                y: 85,
            },
        },
        qrCode: {
            dimensions: {
                width: 250,
                height: 250,
            },
            pos: {
                x: 300,
                y: 10,
            },
        },
        companyName: {
            pos: {
                x: 20,
                y: 10,
            },
        },
        machineModel: {
            pos: {
                x: 20,
                y: 180,
            },
        },
        masterSystemId: {
            pos: {
                x: 20,
                y: 210,
            },
        },
        extMasterSystemIdId: {
            pos: {
                x: 20,
                y: 55,
            },
        },
    },
};

function replaceTemplateVars(template, vars) {
    Object.entries(vars).forEach(([key, value]) => {
        template = template.replace(`{${key}}`, value);
    });

    const trimmed = template
        .split("\n")
        .map((line) => line.trim())
        .join("\n");

    return trimmed;
}

function renderInternalStickerTemplate(templateName, vars) {
    const template = TEMPLATES[templateName];

    return replaceTemplateVars(template.content, {
        qrCodeZPL: vars.qrCodeZPL,
        qrCodeXpos: template.qrCode.pos.x,
        qrCodeYpos: template.qrCode.pos.y,
        companyName: vars.companyName,
        companyNameXpos: template.companyName.pos.x,
        companyNameYpos: template.companyName.pos.y,
        machineModel: vars.machineModel,
        machineModelXpos: template.machineModel.pos.x,
        machineModelYpos: template.machineModel.pos.y,
        masterSystemId: vars.masterSystemId,
        masterSystemIdXpos: template.masterSystemId.pos.x,
        masterSystemIdYpos: template.masterSystemId.pos.y,
        extMasterSystemId: vars.extMasterSystemId,
        extMasterSystemIdXpos: template.extMasterSystemIdId.pos.x,
        extMasterSystemIdYpos: template.extMasterSystemIdId.pos.y,
    });
}

function loadImage(imgUrl) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener(
            "load",
            () => {
                resolve(image);
            },
            false
        );
        image.src = imgUrl;
    });
}

function imageToGRF(imgUrl, options) {
    return new Promise((resolve, reject) => {
        loadImage(imgUrl).then((image) => {
            if (options?.width) {
                image.width = options.width;
            }
            if (options?.height) {
                image.height = options.height;
            }

            let res = imageToZ64(image);
            let zpl = `^GFA,${res.length},${res.length},${res.rowlen},${res.z64}`;
            resolve(zpl);
        });
    });
}

function createInternalStickerZPL(options) {
    const templateName = "sticker-70x35";
    const template = TEMPLATES[templateName];

    return new Promise((resolve, reject) => {
        imageToGRF(options.qrCodeUrl, {
            width: template.qrCode.dimensions.width,
            height: template.qrCode.dimensions.height,
        }).then((qrCodeZPL) => {
            const zpl = renderInternalStickerTemplate(templateName, {
                qrCodeZPL,
                ...options,
            });

            resolve(zpl);
        });
    });
}

const options = {
    qrCodeUrl: "/assets/qr-code-example.jpeg",
    agencyLogoUrl: "/assets/agenzia-entrate-logo-color.png",
    companyName: "Vandelay Industries",
    machineModel: "Model XL-123",
    masterSystemId: "master-system-id",
    extMasterSystemId: "ext-msid",
};

createInternalStickerZPL(options).then((zpl) => {
    document.querySelector(`textarea[name="zpl"]`).value = zpl;
});