在 ReactToPrint 中调整页面大小答案

【问题标题】：Adjust page size in ReactToPrint在 ReactToPrint 中调整页面大小
【发布时间】：2019-02-27 05:58:21
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs printing

【解决方案1】：

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

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

在您的ReactToPrint 内。这将调整您的打印模板页面大小。

【讨论】：

成功了，谢谢，兄弟。 ??

【解决方案2】：

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

【讨论】：

不工作。我试过以英寸为单位的 A5、A6 尺寸，但都没有效果。