如何打印 react-barcode 组件答案

【问题标题】：How to print a react-barcode component如何打印 react-barcode 组件
【发布时间】：2019-06-13 07:49:14
【问题描述】：

我正在尝试打印由 react-barcode 创建的条形码。

我尝试过使用this question 和this 中描述的方法，但我似乎无法打印条形码。

这可能是因为 react-barcode 正在渲染 SVG。我也尝试过react-to-print 和react-easy-print，但它们似乎也让我失望了。

我也希望使条形码可下载，但似乎没有任何效果。我下面的代码是我到目前为止所得到的。

从'react'导入反应，{组件}；从'react-barcode'导入条码；

class App extends Component {
  state= {
    value:''
  }

  onChange=(e)=>{
    this.setState({value:e.target.value})
  }
  onClick=(e)=>{
    // LOGIC TO PRINT BARCODE COMES HERE
  }

  render() {
    const { value } = this.state;
    return (
      <div className="App">
        <input type="text" onChange={this.onChange} value={value} />
        <BarCode
          value={value}
        />
        <button onClick={this.onClick}>Print Barcode</button>
      </div>
    );
  }
}

export default App;

【问题讨论】：

我们需要看一些代码来看看你做错了什么......
@markmoxx 我已编辑问题以显示我的代码的当前状态。

标签： reactjs pdf printing

【解决方案1】：

这是我使用的，它对我有用。您将需要 html2canvas。

我将为此使用 React 钩子，如果您愿意，可以随意将其转换为基于类的组件。

const App=(props)=>{

  const [value,setValue] = React.useState('');
  const wrapper_ref = React.useRef();

  const onChange=(e)=>{
    setValue(e.target.value)
  }

  const onClick=(e)=>{
     const opt = {
        scale: 4
    }
    const elem = wrapper_ref.current;
    html2canvas(elem, opt).then(canvas => {
        const iframe = document.createElement('iframe')
        iframe.name = 'printf'
        iframe.id = 'printf'
        iframe.height = 0;
        iframe.width = 0;
        document.body.appendChild(iframe)

        const imgUrl = canvas.toDataURL({
            format: 'jpeg',
            quality: '1.0'
        })

        const style=`
            height:100vh;
            width:100vw;
            position:absolute;
            left:0:
            top:0;
        `;

        const url = `<img style="${style}" src="${imgUrl}"/>`;
        var newWin = window.frames["printf"];
        newWin.document.write(`<body onload="window.print()">${url}</body>`);
        newWin.document.close();

    });
  }

  return (
      <div className="App">
        <input type="text" onChange={onChange} value={value} />
        {/**This wrapper is important*/}
        <div ref={wrapper_ref}>
            <BarCode
              value={value}
           />
        </div>
        <button onClick={onClick}>Print Barcode</button>
      </div>
    );
}

export default App;

这样就可以了

【讨论】：