CODEWITHSUNDEEP
javascriptreactjsprinting
Subash
Subash

Reputation: 147

Adjust page size in ReactToPrint

I am using ReactToPrint library to print a section of my page using React.js.

<ReactToPrint
  trigger={() => (
    <Button
      variant="contained"
      color="primary"
      className={classes.button}
    >
      PRINT &nbsp;&nbsp;&nbsp;
      <PrintIcon
        className={classNames(classes.leftIcon, classes.iconSmall)}
      />
    </Button>
  )}
  content={() => this.componentRef}
/>
<Barcode
  ref={el => (this.componentRef = el)} 
  name={this.state.displayValue}
  value={this.state.barcodeValue}
  text={this.state.displayValue}
  fontSize={20}
  width={2}
/>

I can see pageStyle property in the GitHub documentation but I cannot find how to use it. Can someone please help me set the size to something like 2.5 x 4 inches?

Upvotes: 5

Views: 24204

Answers (5)

Developer Sabbir
Developer Sabbir

Reputation: 383

You can use it this way, which is also what is recommended by react-to-print on npm.

  1. Here the default page size is A4.
  2. Issue: most browsers do not allow JavaScript or CSS to set the page size

@media all {
  .page -
    break {
      display: none;
    }
}

@media print {
  html,
  body {
    height: initial!important;
    overflow: initial!important; -
    webkit - print - color - adjust: exact;
  }
}

@media print {
  .page -
    break {
      margin - top: 1 rem;
      display: block;
      page -
        break -before: auto;
    }
}

@page {
  size: auto;
  margin: 20 mm;
}

Upvotes: 0

emre-ozgun
emre-ozgun

Reputation: 762

this has worked for me.

 const handlePrint = useReactToPrint({
    pageStyle: `@media print {
      @page {
        size: 500mm 500mm;
        margin: 0;
      }
    }`,
    {...}
  });

Setting it dynamically w/ template literals

const [dimensions, setDimensions] = React.useState({ width: 500, height: 500 });

pageStyle: `@media print {
      @page {
        size: ${dimensions.width}px ${dimensions.height}px;
        margin: 0;
      }
    }`,

w/ useReactToPrint

const [dimensions, setDimensions] = React.useState({ width: 500, height: 500 });


const handlePrint = useReactToPrint({
  pageStyle: `@media print {
      @page {
        size: ${dimensions.width}mm ${dimensions.height}mm;
        margin: 0;
      }
    }`,
  content: () => componentRef.current,
  onAfterPrint: () => handleResetPrint()
});

Upvotes: 1

Shahmir
Shahmir

Reputation: 91

if pageStyle prop of react-to-print isn't working properly you can try this.

  const pageStyle ="
  @page {
    size: A4 landscape;
  }
";

and add to style tag

 <div id="item-detail-print">
    <style>{pageStyle}</style>
      <Barcode
       value={data?.itemById.barCode}
       ref={componentRef}  />
 </div>

Upvotes: 0

JWat
JWat

Reputation: 66

Not sure if you're still having this issue, but try

pageStyle="@page { size: 2.5in 4in }"

within your ReactToPrint. This would adjust your print template page size.

Upvotes: 4

Feferes.net
Feferes.net

Reputation: 11

export function styledPdf() {
  const pageStyle = `{ size: 2.5in 4in }`;
  const divPrint = React.useRef(null);

  return (
    <Div ref={divPrint}>
      <ReactToPrint
        pageStyle={pageStyle}
        trigger={() => <button>Print this out!</button>}
        content={() => divPrint.current}
      />
    </Div>
  );
}

Upvotes: 0

Related Questions