Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
Tabla ANTD Imprimir usando el componente ReactToPrint

Estoy tratando de imprimir la tabla ANTD usando el enlace ReactToPrint, todo parece funcionar bien, pero quiero mostrar algo de texto en la parte superior de la página antes de imprimir. significa que quiero mostrar algo de texto para fines de encabezado, cuando configuro la visibilidad del componente del encabezado como verdadera, no se imprime en el primer clic, se muestra en el segundo clic, pero quiero mostrar el encabezado en el primer clic y cuando imprimo o cancelar, el encabezado debe ocultarse.

Por favor, ayúdenme, presione el botón de imprimir dos veces para ver el resultado en el siguiente enlace.

https://codesandbox.io/s/usestate-not-updating-data-when-passing-from-parent-funcional-component-using-r-forked-xuhnl

Gracias de antemano

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Cuando se llama a la función handlePrint , ref componentRef apunta a la versión anterior del componente. printHeaderVisible solo se vuelve verdadero en el momento del siguiente renderizado.

Puede intentar posponer la llamada de impresión hasta el próximo renderizado como este

 const reactToPrintFunc = useReactToPrint({ content: () => componentRef.current, onBeforeGetContent: () => setprintHeaderVisible(true), onAfterPrint: () => setprintHeaderVisible(false) }); const handlePrint = () => { setTimeout(reactToPrintFunc, 0); };

o haz lo que se recomienda en este problema

 const handlePrint = useReactToPrint({ content: () => componentRef.current, onBeforeGetContent: () => { return new Promise((resolve) => { setprintHeaderVisible(true); resolve(); }); }, onAfterPrint: () => setprintHeaderVisible(false) });
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!