Какое лучшее решение для печати компонентов React?

Question

Я пытаюсь распечатать компонент ReactJS, когда пользователь нажимает кнопку печати. Я пытался использовать React-to-print, но у меня были проблемы со стилем при печати из разных браузеров, таких как firefox и edge.

Вот песочница для кода, которую я создал

https://codesandbox.io/s/jolly-carson-zvrzu?file= / src / App. js

В этой песочнице кода я использую React-to-print, и компонент печати получает массив объектов, который в основном конвертируется в несколько страниц.

Вы увидите проблему на firefox, после нажатия кнопки печати на первой странице будет дополнительное поле сверху, а вторая страница пуста в окне предварительного просмотра.

Может кто-нибудь помочь мне с альтернативой @ реагировать на печать или любое другое решение?

Answer 1

Попробуйте следующие альтернативные модули: https://www.npmjs.com/package/react-easy-print

https://github.com/captray/react-print

https://github.com/tacomanator/react-detect-print

Answer 2

Я смог исправить это после CSS изменений. Решение Джерма было полезным из этой ветки.

Вот новые CSS, , которые также помогли удалить ненужные логи c для расчета полей последней страницы

const DataWrapper = styled(TableCell)`
  && {  
    padding-top: 25px;
    height: 100vh;
    display: flex;
  }
`;


const TopAndBottomWrapper = styled(TableCell)`
  && {
    page-break-after: always;
  }
`;

Я создал новая песочница с кодом .

На самом деле я добавил перерыв до и после каждого компонента в дополнение к высота: 100vh , что помогло установить один компонент на страницу. Также дисплей: flex , чтобы компонент оставался наверху, так как height: 100vh перемещал компонент в середине.

Answer 3

Это, скорее всего, вызвано различными таблицами стилей по умолчанию между браузерами.

Подобные проблемы обычно решаются с помощью CSS Сброс: https://meyerweb.com/eric/tools/css/reset/

Это дает чистый список стилей страниц во всех браузерах, которые одинаковы. Затем вы помещаете свои собственные стили поверх этого.