繁体   English   中英

在 ReactToPrint 中调整页面大小

[英]Adjust page size in ReactToPrint

我正在使用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 英寸吗?

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

如果react-to-printpageStyle不能正常工作,你可以试试这个。

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

并添加到样式标签

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

这对我有用。

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

你可以这样使用,也可以通过 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; }

不确定您是否仍然遇到此问题,但请尝试

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

在您的 ReactToPrint 中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM