javascriptnode.jspdfjspdf

jsPDF png and custom ttf broken when using output()

I'm currently working on my first jsPDF project, and it's going great, accept for one issue ...

On the clientside, I'm generating a PDF which then gets sent to a local REST API. Saving the PDF locally, using the save() method, works fine and I get my "beautiful" PDF. However, after sending it to the API using the output() method, the Barcode TTF is lost and the png on the top right corner looks super weird as well.

PDF from save()

enter image description here

PDF from output()

enter image description here

Might the problem be, that neither the custom ttf nor the png are being embedded into the PDF? If so, how would I change that? Or is it something different?

This is how I generate the PDF:

let img = new Image();
img.src = '/assets/bag.png';
doc.addImage(img,'png',this.width-2-18.54,0,18.54,5);

doc.setFontSize(4);
doc.text("Part No.",0,0, {baseline: 'top'});

doc.setFontSize(10);
doc.text(part + '-' + selection,0,1.5,{baseline: 'top'});

if(description) {
    doc.setFontSize(4);
    doc.text("Description",0,4.5, {baseline: 'top'});
    doc.setFontSize(10);
    doc.text(description,0,6,{baseline: 'top'});
}

if(drawing) {
    doc.setFontSize(4);
    doc.text("Drawing No.",0,9, {baseline: 'top'});
    doc.setFontSize(10);
    doc.text(drawing,0,10.5,{baseline: 'top'});
}

doc.setFontSize(4);
doc.text("Quantity",0,13.5, {baseline: 'top'});
doc.setFontSize(10);
doc.text(amount.toString(),0,15,{baseline: 'top'});

createBarcode(doc,part,this.width-2-18.54,16);

doc.rect(0,0,this.width,this.height);

printAPI(doc.output(),printer,'lbl_' + part.replace('.',''),this.paper,quantity);
if(save) doc.save('lbl_' + part.replace('.','') + '.pdf');

function createBarcode(doc,content,x,y,fontSize = 12,maxWidth = 18.54) {
    doc.setFontSize(fontSize);
    doc.setFont('fre3of9x');
    doc.text('*' + content + '*',x,y,{
        baseline: 'top',
        maxWidth: maxWidth
    });
}

And in order to send it to the API, I simply add doc to the request body.

async function printAPI(doc,printer,labelName,paper,quantity) {
    let res = await fetch('http://127.0.0.1:3000/api/printer/print-label', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            doc: doc,
            printer: printer,
            labelName: labelName,
            paper: paper,
            quantity: quantity
        })
    });
}

Just for reference I'm adding the part from the API endpoint which is responsible for encoding the output() data back into a PDF file. req.body.doc is the data from output()

// [...]
const writer = fs.createWriteStream(uploadDirectory + '' + fileName);
writer.write(req.body.doc)
writer.end();
// [...]

Any advice would be highly appreciated!

Thanks in advance and best regards 😊

Solution

  • On the server, when writing to file, try setting binary encoding, to match doc.output() encoding:

    const writer = fs.createWriteStream(uploadDirectory + '' + fileName, {encoding:'binary'});