Question

我有一个react js项目，需要在其中打印一些条形码。因此，我将react-barcode组件与react-to-print一起使用。
我希望用户从选择器中选择尺寸。如何按用户选择的特定纸张尺寸打印条形码？

我尝试使用

之类的CSS媒体打印

@media print and (width: 2in) and (height: 4in) {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  @page {
    margin: 10%;
    size: landscape;
  }
}

，但是这样做仅允许一个页面大小。我需要动态更改高度和宽度。

ReactToPrint组件

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

选择组件

<Select
      value={this.state.pagesize}
      onChange={this.handleChange}
      input={
        <Input name="page-size" id="page-size-label-placeholder" />
      }
      displayEmpty
      name="page-size"
      className={classes.selectEmpty}
    >
   <MenuItem value={"1.97 X 0.39"}>1.97 X 0.39</MenuItem>     
   <MenuItem value={"2 X 0.8"}>2 X 0.8</MenuItem>
   <MenuItem value={"3.94 X 3.15"}>3.94 X 3.15</MenuItem>
   <MenuItem value={"4 X 1.91"}>4 X 1.91</MenuItem>
</Select>

如何在React.js中为纸张打印添加多个可选页面尺寸？

0 个答案: