Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...