0

I have a component that I'm trying to print using react-to-print, is there any way I can print this component duplicated in one page?

here is my code:

import React, {useRef} from 'react';
import { useReactToPrint } from 'react-to-print';
import MyComponent from './myComponent';
import OtherComponent from './otherComponent';

const CreateAtt = () => {
  const componentRef = useRef();
  const printData = useReactToPrint({
    content: () => componentRef.current,
    documentTitle: 'doc',
  });

  return (
    <>
      <div className='d-flex justify-content-between'>
        <div ref={componentRef}>
          <MyComponent />
        </div>
          <OtherComponent />
      </div>
      <button className='btn btn-primary download-button' onClick={printData}>print</button>
    </>
  )
}

export default CreateAtt;
Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
Houssam Mrabet
  • 21
  • 6
  • React-to-print only supports printing one component at a time, so you would need to use a different method to print multiple components on the same page. However, you could use a third-party library like jspdf (https://github.com/MrRio/jsPDF) to generate a PDF with multiple copies of the same component. – Juan Melnechuk Feb 18 '23 at 20:11

0 Answers0