在 ReactToPrint 中調整頁面大小

Question

我正在使用ReactToPrint庫使用 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} />

我可以在 GitHub 文檔中看到pageStyle屬性，但找不到如何使用它。 有人可以幫我將尺寸設置為 2.5 x 4 英寸嗎？

Answer 1

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>
    )
}

Answer 2

如果react-to-print的pageStyle不能正常工作，你可以試試這個。

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

並添加到樣式標簽

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

Answer 3

這對我有用。

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

使用模板文字動態設置它

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

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

帶 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()
});

Answer 4

你可以這樣使用，也可以通過 npm 的react-to-print推薦。

1. 這里默認的頁面大小是 A4。
2. 大多數 Brouwer問題不允許 JavaScript 或 CSS 設置頁面大小

 @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; }

Answer 5

不確定您是否仍然遇到此問題，但請嘗試

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

在您的 ReactToPrint 中。