Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сложные таблицы для ReactPDF. Помогите (https://javascript.ru/forum/dom-window/85014-slozhnye-tablicy-dlya-reactpdf-pomogite.html)

tolkant 04.03.2023 22:30

Сложные таблицы для ReactPDF. Помогите
 
Вложений: 1
Я плохо разбираюсь в вопросе, помогите сориентироваться.

Нужно сделать форму документа, которую через reactpdf вывести в pdf документ. Т.е. сама форма должна быть свёрстана. Раньше для этого нужен был html код, который мог сделать любой верстальщик.

Теперь стэк на react и там нужно как бы "верстать" в jsx формате. Все с кем говорил, говорят что это мега сложно, особенно когда речь о какой нибудь бухгалтерской товарной накладной.

В интернет можно скачать готовые html формы таких документов: счет на оплату, товарная накладная, акт, упд.
А тут даже никто писать верстку не хочет.

Объясните, как упростить создание формы (т.е. сверстать) документ типа УПД?

Пример файла в формате pdf во вложении к сообщению

ksa 04.03.2023 22:43

Цитата:

Сообщение от tolkant
Раньше для этого нужен был html код, который мог сделать любой верстальщик.

"Верстка на Реакте" ничем не отличается от "обычной" верстки...

tolkant 04.03.2023 22:47

Цитата:

Сообщение от ksa (Сообщение 551019)
"Верстка на Реакте" ничем не отличается от "обычной" верстки...

т.е. я беру код html формы упд, вставляю его в коды react и через reactpdf вывожу документ .pdf?

ksa 04.03.2023 22:58

Можно "сделать" pdf прямо в Реакте на клиенте... Есть для этого модуль.
https://dev.to/finallynero/generatin...react-pdf-4ka7

ksa 04.03.2023 23:00

Цитата:

Сообщение от tolkant
т.е. я беру код html формы упд, вставляю его в коды react

Я бы сказал так - используя Реакт, нужно "повторить" html контент "формы упд".

Ну и далее
Цитата:

Сообщение от tolkant
и через reactpdf вывожу документ .pdf

:yes:

tolkant 04.03.2023 23:03

я знаю про этот модуль. как сверстать код самого документа, который влетит потом в этот reactpdf и вылезет в .pdf на загрузку

tolkant 04.03.2023 23:05

Вложений: 1
Как упростит написание сложного документа УПД в формате кода что ниже как пример приложен

ksa 04.03.2023 23:21

Цитата:

Сообщение от tolkant
в формате кода что ниже как пример приложен

Это вариант "верстки" в стиле React-Native...

Там принцип такой:
- Можно использовать только их компоненты (не html)
- На базе их компонентов можно делать свои
- Все элементы верстаются как flex-элементы
- Стили так же нужно оформлять как в примере
const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
})

Все стили оформляются как объект

tolkant 04.03.2023 23:44

Цитата:

Сообщение от ksa (Сообщение 551026)
Это вариант "верстки" в стиле React-Native...

Там принцип такой:
- Можно использовать только их компоненты (не html)
- На базе их компонентов можно делать свои
- Все элементы верстаются как flex-элементы
- Стили так же нужно оформлять как в примере
const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
})

Все стили оформляются как объект

А есть варианты упростить работу, если есть уже к примеру html верстка?

ksa 05.03.2023 12:36

Цитата:

Сообщение от tolkant
А есть варианты упростить работу, если есть уже к примеру html верстка?

Для этого модуля html не подойдет. Там можно использовать только "компоненты" самого модуля. И про стили так же не забывай. Это все "аналоги" обычного css.

Но, чисто теоретически, если тебе сверстают "как для того модуля", но только на html+css. Т.е. попасть нужно прям по количеству тегов и в стиле flex...
Тогда (опять же теоретически) названия тегов можно заменить на названия компонентов - и ву а ля! PDF-файл готов. :dance:


Часовой пояс GMT +3, время: 01:31.