Как напечатать компонент реагирующего штрих-кода - PullRequest
Новая
       1

Как напечатать компонент реагирующего штрих-кода

0 голосов
/ 18 января 2019

Я пытаюсь распечатать штрих-код, созданный реагирующим штрих-кодом.

Я пытался использовать методы, описанные в этом вопросе и этом , но я не могу напечатать штрих-коды.

Это, вероятно, потому что SVG визуализируется с помощью кода реакции-штрих-кода. Я также пытался реагировать на печать и реагировать-легко печатать , но они, похоже, тоже меня подводят.

Я также надеюсь сделать штрих-код загружаемым, но, похоже, ничего не работает. Код, который я имею ниже, - это то, что я получил до сих пор.

импорт React, {Component} из'act '; импортировать штрих-код из 'response-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;

1 Ответ

0 голосов
/ 13 июня 2019

Это то, что я использовал, и это сработало для меня. Вам понадобится 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;

Это будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...