Приложение для создания и печати ценников

Приветствую всех! Работаю в строительном маркете и часто имею дело с ценниками, но ценники формата А1,2,3,4,5,6 делаются посредством редактирования шаблона в корэл и это крайне неудобно. Давно крутится мысль в голове сделать простенькое приложение для упрощения моей и моих коллег работы. Но беда в том, что мои познания в программирования стремятся к нулю. Были попытки изучения некоторых ЯП, но все заканчивалось на начальном уровне.
Для создания приложения выбрал NWjs, т.к. HTML и CSS для меня более менее доступен, а JS ранее пытался изучать. Приложение представляет из себя некоторый конструктор, который в последствии должен напечатать результат или сохранить его в PDF(если это большой формат), для дальнейшей его печать на плотере. Прошу направить и/или подсказать куда двигаться и копать для достижения моих целей.

Примерно визуализировал само окно приложения.!

NWjs не обязателен: можно сделать html-css-js страничку, которая будет решать задачу.

Принцип работы приложения

  1. Делаешь разметку (html-css) как на примере макета
  2. Делашь обработку формы по клику на “печать”. Это можно сделать без библиотек. Но я бы взял jquery для этого случая. По ней много документации и много плагинов (например для валидации). В итоге нужно получить объект с данными вида
{"size": "a4",
"title": "",
"description": ""
...
}

где значения - соответствующие поля из инпутов. Скорее всего будут нюансы с валидацией полей. Т.е. проверкой что введенные данные соответствуют ожидаемым. Но это отдельная тема и гуглится она хорошо по “валидация формы javascript”. Валидацию на первом этапе можно и опустить и добавить позже.
3. Потом данные передаются в функцию которая сгерирует структуру данных, ожидаемую pdf-генератором. Например можно взять эту библиотеку: http://pdfmake.org/#/. Читай документацию https://pdfmake.github.io/docs/ и смотри примеры https://github.com/bpampuch/pdfmake/blob/0.1/examples/ чтобы понять какую структуру данных нужно сгенерировать. Эта библиотека выдаст на выходе pdf файл. И там уже нужно будет разобраться умеет ли библиотека печатать pdf, какие характеристики pdf должны быть для печати на а2 итд.


Еще тебе придется разобраться с npm и компиляцией js файлов. С этого и начнется работа над проектом.

  1. Прочитай про package.json. Тебе интересно понять как устанавливать зависимости. И pdfmake и jquery и parcel-bundler будут зависимостями в твоем проекте.
  2. Прочитай про parcel-bundler https://github.com/parcel-bundler/parcel. Самый простой из доступных компиляторов js (не бери webpack или gulp - задолбаешься разбираться).

Чтобы это все сделать нужно минимальное понимание работы командной строки (понять в какой папке, сменить папку, запустить команду, понять логи в результате выполнения команды, прекратить выполнение команды).

1 Симпатия

Как MVP можно даже попробовать не заморачиваться с библиотеками конвертации в PDF, а обойтись

@media print {}

В котором скрывать все что не нужно. Но придется поморочиться с масштабированием и пропорциями изображения.

SVG — наше всё ;)

Спасибо за советы, разобрался как связать шаблон с настройками параметров, но пока не получается склеить шаблон на HTML+CSS, не все мне понятно постоянно что-то куда-то убегает и рассыпается. Попробую почитать про SVG.

Сильно не советую: только потеряешь время. Svg решает очень узкие задачи: представление векторной графики и ее анимации. В твоем случае svg будет как пятое колесо.

Лучше разберись как вставить свой неработающий код в jsfiddle.net, и создай новый топик с вопросом о том что не работает в разметке.

1 Симпатия