Сложные таблицы для ReactPDF. Помогите

[tolkant]

Я плохо разбираюсь в вопросе, помогите сориентироваться.

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

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

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

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

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

[ksa]

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

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

[tolkant]

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

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

[ksa]

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

[ksa]

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

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

Ну и далее

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

[tolkant]

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

[tolkant]

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

[ksa]

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

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

Там принцип такой:
- Можно использовать только их компоненты (не html)
- На базе их компонентов можно делать свои
- Все элементы верстаются как flex-элементы
- Стили так же нужно оформлять как в примере

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
})

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

[tolkant]

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
})

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

[ksa]

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

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

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