JsPDF png и пользовательский ttf не работают при использовании вывода()

Сейчас я работаю над своим первым проектом jsPDF, и все идет отлично, примите во внимание одну проблему...

На стороне клиента я создаю PDF-файл, который затем отправляется в локальный REST API. Сохранение PDF-файла локально с помощью метода save() работает нормально, и я получаю свой «красивый» PDF-файл. Однако после отправки его в API с помощью метода output() TTF штрих-кода теряется, а png в правом верхнем углу тоже выглядит очень странно.

PDF от save()

PDF от output()

Может быть, проблема в том, что ни пользовательский ttf, ни png не встраиваются в PDF-файл? Если да, то как бы я это изменил? Или это что-то другое?

Вот как я генерирую 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
    });
}

И чтобы отправить его в API, я просто добавляю doc в тело запроса.

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

Просто для справки я добавляю часть конечной точки API, которая отвечает за кодирование данных output() обратно в файл PDF. req.body.doc — это данные из output()

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

Любой совет будет высоко оценен!

Заранее спасибо и с уважением 😊

трудно сказать... вы должны включить клиентский код jsPdf, а также ту часть, которая отправляет его в конец API

traynor 18.07.2024 20:45

Правда, возможно, следовало бы дать еще больше контекста. Я отредактировал свой пост и включил больше кода.

jam0 19.07.2024 14:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На сервере при записи в файл попробуйте установить кодировку binary, чтобы она соответствовала кодировке doc.output():

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

Другие вопросы по теме