CODEWITHSUNDEEP
reactjsreact-to-print
Noman Arshad
Noman Arshad

Reputation: 11

how i adjust page size in react to print library

i am using react to print library in one of my react js functional component. i want to adjust the page size according to my need. for one component i need to adjust my page size to a4 for printing and for other i want to adjust my page size to legal here is my react to print hook

 const componentRef = useRef();

    const handlePrint = useReactToPrint({
        content: () => componentRef.current
    });

and here i am using it to print my component

<div className="print-only position-relative" ref={componentRef} style={{width: "20.6cm", height: "32.91cm"}}>
my html structure to print
</div>

i have tried many solutions like i am highlighting below

 const handlePrint = useReactToPrint({
        content: () => componentRef.current,
        pageStyle: '{ size: 2.5in 4in }'
    });

using external css file like this

.print-only {
    display: none;
}

@media print {
    @page {
        size: A5;
    }

    .print-only {
        display: block;
    }
}

but not succeeded to set the page size

i also tried all solution mention over stack overflow link adjust-page-size-in-reacttoprint

how to set A5 page size in react-to-print

but again got failure is there anyone to solve this problem Note: my chrome version is 122 which is supported according to caniuse

Upvotes: 1

Views: 1379

Answers (0)

Related Questions