Приветствую всех! Работаю в строительном маркете и часто имею дело с ценниками, но ценники формата А1,2,3,4,5,6 делаются посредством редактирования шаблона в корэл и это крайне неудобно. Давно крутится мысль в голове сделать простенькое приложение для упрощения моей и моих коллег работы. Но беда в том, что мои познания в программирования стремятся к нулю. Были попытки изучения некоторых ЯП, но все заканчивалось на начальном уровне.
Для создания приложения выбрал NWjs, т.к. HTML и CSS для меня более менее доступен, а JS ранее пытался изучать. Приложение представляет из себя некоторый конструктор, который в последствии должен напечатать результат или сохранить его в PDF(если это большой формат), для дальнейшей его печать на плотере. Прошу направить и/или подсказать куда двигаться и копать для достижения моих целей.
NWjs не обязателен: можно сделать html-css-js страничку, которая будет решать задачу.
Принцип работы приложения
- Делаешь разметку (html-css) как на примере макета
- Делашь обработку формы по клику на “печать”. Это можно сделать без библиотек. Но я бы взял 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 файлов. С этого и начнется работа над проектом.
- Прочитай про package.json. Тебе интересно понять как устанавливать зависимости. И pdfmake и jquery и parcel-bundler будут зависимостями в твоем проекте.
- Прочитай про parcel-bundler https://github.com/parcel-bundler/parcel. Самый простой из доступных компиляторов js (не бери webpack или gulp - задолбаешься разбираться).
Чтобы это все сделать нужно минимальное понимание работы командной строки (понять в какой папке, сменить папку, запустить команду, понять логи в результате выполнения команды, прекратить выполнение команды).
Как MVP можно даже попробовать не заморачиваться с библиотеками конвертации в PDF, а обойтись
@media print {}
В котором скрывать все что не нужно. Но придется поморочиться с масштабированием и пропорциями изображения.
SVG — наше всё ;)
Спасибо за советы, разобрался как связать шаблон с настройками параметров, но пока не получается склеить шаблон на HTML+CSS, не все мне понятно постоянно что-то куда-то убегает и рассыпается. Попробую почитать про SVG.
Сильно не советую: только потеряешь время. Svg решает очень узкие задачи: представление векторной графики и ее анимации. В твоем случае svg будет как пятое колесо.
Лучше разберись как вставить свой неработающий код в jsfiddle.net, и создай новый топик с вопросом о том что не работает в разметке.
Не соглашусь.
В данном случае главным преимуществом является не то что это Graphics, а Scalable.
А именно, можно один раз задать все размеры и уже на разных форматах будет всё растягиваться пропорционально автоматически.
А чтоб того же добиться с использованием HTMLL+CSS это надо ещё постараться.
Естественно я имею в виду не саму форму настройки, а непосредственно сам ценник.
Да, это возможо.
У тебя есть опыт с подготовкой SVG для разных форматов печати? Или рассуждения теоретические?
У меня есть опыт подготовки впринципе разных SVG и есть опыт подготовки для печати на HTML+CSS. И могу сравнить насколько велика разница. И даже всего для одного формата A4 это было больно.
Правда, готовил печать очень давно и тогда не были доступны новомодные calc, vw и --var. Так что сейчас, думаю, вполне вероятно это будет возможно. Только надо не забывать все размеры указывать в процентном отношении от ширины: отступы по ширине, отступы по высоте, размеры текстов и т.д. Хотя всё равно не особо уверен за режим media print
Но! У SVG всё равно есть несколько преимуществ:
- Проще экспортировать в 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 - Можно отобразить просто как картинку используя тэг
img
<img src="data:image/svg+xml;utf8,..." />
Тогда экспортировать в PDF будет ещё проще. И особенно этот пункт будет полезен при отправке письмом, чтоб отображалось прям в теле. Потому что HTML+CSS внутри писем — это особый случай. Возможности большинства почтовых клиентов там застряли на уровне начала 2000-хных. И для простых случаев ещё вполне будет норм. А вот все новомодные фичи пойдут по известному направлению. И если требуется и динамический контент, и сохранение пропорций, то я здесь вижу только SVG
Теперь я вижу какую ценность даст SVG в этой задаче. Я был неправ, говоря что SVG будет бесполезен. Мнения о том что нужно решать задачу на html-css не изменяю.
Какие же преимущества у HTML+CSS по сравнению с SVG?
- Один инструмент: как форма так и ее результат будет на html.
- Просто работает: без оглядки на браузер можно распечатать html страницу.
- Проще редактировать в текстовом редакторе и дебажить.
- Модульность решения без необходимости заранее разбивать страницу на осмысленные независимые части. На svg слепишь 2 элемента, а потом окажется что их нужно было бы отделить друг от друга.
- Больший выбор инструментов для позиционирования (flex, float, таблицы на худой конец).
- Больше документации и готовых ответов.
Строго говоря и HTML и SVG — это XML. В текстовом редакторе выглядит фактически так же.
И работать из скрипта с SVG не сложнее, чем с обычным DOM
Поддержка SVG добавлена во все браузеры ещё с незапамятных времён. И отлажена как только было возможно.
Зелёный практически везде, включая старые браузеры. Даже раньше, чем Flex
Ну от этого HTML тоже не застрахует
Тут не поспоришь
Смотря как искать. Вот на MDN почти все описаны элементы и есть туториалы.
Да и гугл никто не отменял. Статей хватает. На том же ютуб и доклады, и туториалы в наличии.
Зачам так замарачиваться
Я для порезки на оракале использовал отдельную программу от того же плотера…
К плотерам идут дрова которые понимают виндовс офис…
Тот же офис документ сохраняешь в pdf без всяких node.js и заморочек с svg и css
Кажись это интересно но рыть надо в другом направлении.
И на случай если не знаете HTML CSS есть у офиса возможность сохранения в формат для веба, и у корала такаяже функция должна присутствовать.(готовый шаблон)
и я к тому про офис что можете использовать онлайн документы если хотитте веб и с мобильного фигачить ценники. … Но это все наворотоы и пакетное преобразование в корале или скрипт в люстре вам дадут больше радости. Здоровенные конторы не зря нанимают людей на эту должность в рекламме что бы те фигачили ценники и не меняли этот процесс :). Эицентр на сколько мне известно до сих пор купить плотер под А0 не хочет. И их до сих пор рисуют от руки. Так что ценник в кореле это еще сносно и удобно.
Ты говоришь правильные вещи что и документация есть и что 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… А это новый топик!!