SmartQuery /ВОПРОС → ПРИМЕР → ПОНЯТНЫЙ ОТВЕТ
Веб-разработка

JsBarcode: сохранить штрихкод в PDF

JsBarcode рисует штрихкод, а jsPDF формирует PDF. Для простого браузерного варианта используйте canvas: у него есть метод toDataURL. У SVG-элемента такого метода нет, поэтому замена canvas на svg требует другого способа экспорта.

Подготовить элементы и зависимости

Установите jsbarcode и jspdf в свой проект и подключите код через его сборщик модулей. Импорты ниже предназначены для браузерного модуля после сборки; браузер сам по себе не разрешает имена npm-пакетов без соответствующей настройки.

npm install jsbarcode jspdf
<canvas id="barcode" aria-label="Штрихкод 123456789"></canvas>
<button id="save-pdf" type="button">Скачать PDF</button>

Сформировать Code 128 и документ

import JsBarcode from 'jsbarcode';
import { jsPDF } from 'jspdf';

const canvas = document.querySelector('#barcode');
JsBarcode(canvas, '123456789', {
  format: 'CODE128',
  width: 3,
  height: 100,
  margin: 20,
  displayValue: true
});

document.querySelector('#save-pdf').addEventListener('click', () => {
  const pdf = new jsPDF({ unit: 'mm', format: 'a4' });
  const widthMm = 80;
  const heightMm = widthMm * canvas.height / canvas.width;
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG',
    10, 10, widthMm, heightMm);
  pdf.save('barcode.pdf');
});

Скрипт запускайте после появления элементов, например из module-script в конце body. Пример формирует конкретное значение 123456789 и сохраняет соотношение сторон при переносе из пикселей canvas в миллиметры PDF. Поля и белая область вокруг штрихкода также попадают в картинку.

Проверить, что код читается

  1. Откройте PDF и убедитесь, что подпись и полосы не обрезаны.
  2. Распечатайте без произвольного растяжения и проверьте тем сканером, которым будут пользоваться.
  3. Сравните считанное значение с исходной строкой, включая ведущие нули.
  4. Для EAN и других форматов проверяйте их собственные требования к данным; произвольная строка подходит не каждому формату.

PNG в PDF остаётся растровым изображением. Увеличение до любого размера не сделает его векторным. При большом количестве этикеток или требованиях к печати отдельно выберите разрешение и физические размеры. Для пользовательского ввода ограничивайте длину и обрабатывайте ошибки генератора; не вставляйте его как HTML.

Документация