Задать вопрос
@aznhautroalvyl
react

Распечатать компонент React?

Необходимо отправить на печать компонент по нажатию на кнопку. Попробовал сделать это с помощью react-to-print. Всё получилось, но только с тестовым примером (в котором в верху страницы добавляется ссылка, при нажатии на которую компонент уходит на печать).
Проблема в том, что кнопка находится в компоненте Footer. Пробовал сделать так:
trigger={() => (this.state.isPrint)}
Чтобы проверить, нажата ли кнопка, но получил
ошибку
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Как правильно реализовать или есть что-нибудь получше react-to-print для распечатки компонентов?

ReportPage
import ReactToPrint from 'react-to-print';

class ReportPage extends Component {
  constructor(props) {
    super(props);
    this.state = {     
      isPrint: false
    };
   ...
  }

 ...
  printTable(value) {
    this.setState({ isPrint: value });
  }

  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href='#'>Print this out!</a>}  // здесь добавляется ссылка, при нажатии компонент уходит на печать
          content={() => this.componentRef}
        />
        <main>
         ...
          <ReportTable ref={el => (this.componentRef = el)} /> // этот компонент надо напечатать
        </main>
        <Footer handlePrintTable={this.printTable}/>
      </div>
    );
  }
}


Footer
class Footer extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.handlePrintTable(true);
  }

  render() {
    return (
      <footer>
        ...
         <a href='#' role='button' onClick={this.handleClick}>
          Распечатать
         </a>
        ...
      </footer>
    );
  }
}


Описание trigger
A function that returns a React Component or HTML element
  • Вопрос задан
  • 2167 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
Heian
@Heian
Ашот
Я сделал просто: создал стили для print-режима, и при нажатии на кнопку вызвал window.print. А в стилях у меня в зависимости от активных компонентов некоторым присваивался display: none, а некоторые меняли свою раскладку и цвета. Никакие сторонние компоненты не потребовались в итоге.
Ответ написан
Комментировать
Комментировать
sergej_saveljev
@sergej_saveljev
js, nodejs, react 
<div
	onClick={() => {
		if (!this.componentRef) {
			return;
		}

		const mywindow = window.open('', 'PRINT');

		if (!mywindow) {
			return;
		}

		mywindow.document.write(
			'<html><head><title>' + document.title + '</title>',
		);
		mywindow.document.write('</head><body >');

		mywindow.document.write(this.componentRef.innerHTML);
		mywindow.document.write('</body></html>');

		mywindow.document.close(); // necessary for IE >= 10
		mywindow.focus(); // necessary for IE >= 10*/

		mywindow.print();
		mywindow.close();

		return true;
	}}
>
	Test
</div>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий React Native разработчик
Студия 15
от 200 000 до 250 000 ₽
React Native Developer
Wanted. • Санкт-Петербург
До 300 000 ₽
React Native developer (+Node.js)
CTRL+ • Москва
от 250 000 до 320 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Телеграмм бот на Python
22 нояб. 2024, в 22:26
3500 руб./за проект
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Ещё заказы