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

Приветствую всех! Работаю в строительном маркете и часто имею дело с ценниками, но ценники формата А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 Симпатия

Не соглашусь.
В данном случае главным преимуществом является не то что это Graphics, а Scalable.
А именно, можно один раз задать все размеры и уже на разных форматах будет всё растягиваться пропорционально автоматически.
А чтоб того же добиться с использованием HTMLL+CSS это надо ещё постараться.
Естественно я имею в виду не саму форму настройки, а непосредственно сам ценник.

Да, это возможо.

У тебя есть опыт с подготовкой SVG для разных форматов печати? Или рассуждения теоретические?

У меня есть опыт подготовки впринципе разных SVG и есть опыт подготовки для печати на HTML+CSS. И могу сравнить насколько велика разница. И даже всего для одного формата A4 это было больно.
Правда, готовил печать очень давно и тогда не были доступны новомодные calc, vw и --var. Так что сейчас, думаю, вполне вероятно это будет возможно. Только надо не забывать все размеры указывать в процентном отношении от ширины: отступы по ширине, отступы по высоте, размеры текстов и т.д. Хотя всё равно не особо уверен за режим media print

Но! У SVG всё равно есть несколько преимуществ:

  1. Проще экспортировать в PDF. Тот же упомянутый выше pdfmake
    https://pdfmake.github.io/docs/document-definition-object/svgs/
    Есть и множество других библиотек
    http://pdfkit.org/
    https://parall.ax/products/jspdf
    https://github.com/yWorks/jsPDF
    https://github.com/yWorks/svg2pdf.js
  2. Можно отобразить просто как картинку используя тэг img
<img src="data:image/svg+xml;utf8,..." />

Тогда экспортировать в PDF будет ещё проще. И особенно этот пункт будет полезен при отправке письмом, чтоб отображалось прям в теле. Потому что HTML+CSS внутри писем — это особый случай. Возможности большинства почтовых клиентов там застряли на уровне начала 2000-хных. И для простых случаев ещё вполне будет норм. А вот все новомодные фичи пойдут по известному направлению. И если требуется и динамический контент, и сохранение пропорций, то я здесь вижу только SVG

1 Симпатия

Теперь я вижу какую ценность даст SVG в этой задаче. Я был неправ, говоря что SVG будет бесполезен. Мнения о том что нужно решать задачу на html-css не изменяю.

Какие же преимущества у HTML+CSS по сравнению с SVG?

  • Один инструмент: как форма так и ее результат будет на html.
  • Просто работает: без оглядки на браузер можно распечатать html страницу.
  • Проще редактировать в текстовом редакторе и дебажить.
  • Модульность решения без необходимости заранее разбивать страницу на осмысленные независимые части. На svg слепишь 2 элемента, а потом окажется что их нужно было бы отделить друг от друга.
  • Больший выбор инструментов для позиционирования (flex, float, таблицы на худой конец).
  • Больше документации и готовых ответов.

Строго говоря и HTML и SVG — это XML. В текстовом редакторе выглядит фактически так же.
И работать из скрипта с SVG не сложнее, чем с обычным DOM

Поддержка SVG добавлена во все браузеры ещё с незапамятных времён. И отлажена как только было возможно.
https://caniuse.com/#search=SVG
Зелёный практически везде, включая старые браузеры. Даже раньше, чем Flex
https://caniuse.com/#search=flex

Ну от этого HTML тоже не застрахует

Тут не поспоришь

Смотря как искать. Вот на MDN почти все описаны элементы и есть туториалы.

Да и гугл никто не отменял. Статей хватает. На том же ютуб и доклады, и туториалы в наличии.

Зачам так замарачиваться
Я для порезки на оракале использовал отдельную программу от того же плотера…
К плотерам идут дрова которые понимают виндовс офис…
Тот же офис документ сохраняешь в pdf без всяких node.js и заморочек с svg и css
Кажись это интересно но рыть надо в другом направлении.
И на случай если не знаете HTML CSS есть у офиса возможность сохранения в формат для веба, и у корала такаяже функция должна присутствовать.(готовый шаблон)

2 Симпатий

и я к тому про офис что можете использовать онлайн документы если хотитте веб и с мобильного фигачить ценники. … Но это все наворотоы и пакетное преобразование в корале или скрипт в люстре вам дадут больше радости. Здоровенные конторы не зря нанимают людей на эту должность в рекламме что бы те фигачили ценники и не меняли этот процесс :). Эицентр на сколько мне известно до сих пор купить плотер под А0 не хочет. И их до сих пор рисуют от руки. Так что ценник в кореле это еще сносно и удобно.

1 Симпатия

Ты говоришь правильные вещи что и документация есть и что svg можно редактировать как текст и что с ней можно работать. Тем не менее я останусь при своем мнении что задачу лучше решать на html-css (или вон, вообще альтернативный путь выше предлагают), чем на html+css+svg. Формально svg звучит не сложнее html-я, на практике я считаю что с ней (svg) будет больше проблем и заморочек.

В скришноте из топика - какую часть SVG решит лучше чем html+css?

Как уже писал выше — пропорции. Не зависимо ни от формата страницы, ни от отступов

Пропорции фонов, текста?

Да, текста и отступов, представь себе.
Во-первых, не те отступы по ширине + не тот размер шрифта = перенос слов. Нарушается WYSIWYG. То есть, в форме старался подгонял, чтоб смотрелось нормально, а на печати слово вылезло на другую строку.
Во-вторых, отступы по высоте. Если не сохранятся пропорции, будет выглядеть либо скукожено, либо как портянка.

по этой причине и пользуют спец проги для вектора.(люстра, corel, gimp :) )
иначе головная боль Вам обеспечен в вебе при распечатке.
Если хотите веб - Используйте Виртуальный принтерт с какой то там попытки…
Также рекомендуется сохранять контент / страницу в формате pdf и печатать ее через службу облачной печати!!!
dmitry дал исчерпывающий ответ - HTML

Так же уже. есть много либ для обработки svg. Вручную в это вьезжать это выстрел в ногу.
Я б на вашем месте смотрел готовое решение по вектору в вебе, это Ваше время а также если у заказчика есть средства на вылизывание макетов… (не знаю - не видел такого - хтмл и погнали).
Тема -“Приложение для создания и печати ценников” в рамаках обсуждение плюсов и минусов SVG нужно выносить во отдельный топик!

Резюмирую:
Я уверен что SVG это xhtml на который действуют теже правила XML, что и на HTML могу заключить, что Вам будут не те отступы по ширине + не тот размер шрифта = перенос слов.в разных браузерах и устройствах и в html… А это новый топик!!

1 Симпатия