如何打印react条码组件

IT技术 reactjs pdf printing
2021-05-19 04:11:45

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

我一直在使用中描述的方法试了这个问题，而这个，但我似乎无法打印条形码。

这可能是因为一个 SVG 是由 react-barcode 渲染的。我也尝试过react-to-print和react-easy-print但它们似乎也让我失望。

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

import React, { Component } from 'react'; 从“react条码”导入条码；

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

这会工作

其它你可能感兴趣的问题
上一篇水平线 z 轴打印不正确 下一篇如何更改我的减速器中的状态，尝试将属性设置为 true/false