1

I usually use react-to-print for printing react components with a low effort and great flexibility. I want to set page size in my react-project.

This is my code:

const Invoice = (props) => {

var clientInfo = JSON.parse(localStorage.getItem('clientInfo'));
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth(); //Current Month
var year = new Date().getFullYear(); //Current Year
var months = ['Jan','Feb','March','April','May','June','July','Aug','Sep','Oct','Nov','Dec']

var fullDAte = months[month]+'-'+date+'-'+year
// console.log("printing forr ----------->================", fullDAte );
var docTitle = clientInfo.clientName +'_Date_' +fullDAte

const componentRef = useRef();    
const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  documentTitle: docTitle,

});

return (
  <div class="printBtn-container">
    <PrintPage ref={componentRef} />
    <div className="printBtnStyling">
    <button className="printBtn" onClick={handlePrint}>Print this out!</button>
    <button className="printBtn" onClick={()=>{props.history.goBack()}}>Make New Invoice</button>
    </div>
  </div>
);

};

this is my main component that i want to print or save as pdf:

const PrintPage =  React.forwardRef((props, ref) => {
           

          ----My Compoenent code here----

 })

and i import this for whole project

import { useReactToPrint } from 'react-to-print';

kindly guide me how to do page size setting

user14646450
  • 1
  • 1
  • 3
  • Does this answer your question? [How to change height or width of pdf in react (npm react-pdf)](https://stackoverflow.com/questions/64069008/how-to-change-height-or-width-of-pdf-in-react-npm-react-pdf) – Sully Mar 08 '22 at 05:49

1 Answers1

1

Try out this:

const pageStyle = `@page {
    size: 210mm 148mm;
    }
    @media print {
    @page {  size: a5 landscape;
        margin: 0mm !important;
    }
    @media all {
                    .pagebreak {
                      overflow: visible; 
                    }
                }
            }
        }`;
Aiswarya V Devan
  • 11
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Thibault Walterspieler Mar 08 '22 at 11:35