В этой статье я поделюсь с вами одной из самых сложных задач, с которыми я столкнулся, когда принимал участие в разработке системы панели администратора для медицинской компании.
Задача состояла в том, чтобы создать инструмент генератора штрих-кода для компании. Во-первых, может показаться и можно подумать, что существует множество npm-пакетов, которые мы можем использовать. Но это было не так просто, как казалось, поэтому рекомендую вам дочитать эту статью до конца, чтобы получить исчерпывающий ответ о том, что в ней самое сложное и сложное.
1. Первым делом нужно было найти пакет. (Я использовал React Barcode для генерации штрих-кода)
2. Второй шаг: импорт компонента штрих-кода.
3. Третий шаг — внедрить компонент штрих-кода в ваш проект.
Вам нужно открыть div с определенным id и поместить компонент штрих-кода в div. Идентификатор необходим для печати штрих-кода.
4. Создайте все необходимые инструменты
1. Создайте хук React useRef, чтобы получить доступ к самому компоненту Barcode.
const ref= useRef()
2. ширина и высота (мои настройки width={1}, height={40} считаются стандартными)
3. Итак, нам нужно значение для штрих-кода в виде чисел. Как мы знаем, штрих-код содержит числа (11–13 разных)
Мой окончательный результат:
Как вы видите выше фото со случайными числами, наш компонент сгенерировал штрих-код.
5. Последний шаг, который, с моей точки зрения и опыта, является наиболее сложным, заключается в том, чтобы сделать штрих-код пригодным для печати с правильным размером страницы.
Итак, вот моя проблема, с которой я столкнулся. Я не мог распечатать ее с помощью функции window.print(), так как она печатает всю страницу в формате a4 или других форматах, но у нее нет меньшего размера страницы, да не размер страницы для печати.
Решение
Чтобы решить эту проблему, я исследовал почти неделю, и О решил эту проблему с помощью пакета ReactToprint.
Применение
— — Trigger — —получает div, который запустит функцию печати
— — Content— — получает ссылку, которая связана с компонентом штрих-кода, чтобы получить доступ к изображению сгенерированного штрих-кода
— — pageStyle — — это решение нашей задачи получает параметры стилей страницы
На рисунке выше я задал параметры стиля в переменном стиле страницы, как вы видите, размер моей страницы составляет 30 мм 20 мм (вы можете указать размер своей страницы, переведя пиксели в миллиметры)
Итак, окончательный результат:
Наслаждайтесь!
