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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…