react 前端实现打印发票/图片

项目场景：

电商后台管理系统，有一个功能要在web端生成发票、发货单（图片），并支持打印。客户是澳洲人，只考虑Chrome即可。

解决方案：

由于原型中发票的样式有一丢丢复杂，所以我们采用后端提供数据，前端编排打印模板的方案来实现。前端采用浏览器默认的打印方法window.print()

  //  点击打印按钮
  handlePrint = async () => {
    const { data } = await printtaxinvoice({ 
    	id:this.props.location.state.id 
    })
    // 获取打印数据之后再调用window.print()
    this.setState({ printData: data }, () => this.getPrint()) 
  }
  // 执行打印
  getPrint = () => {
    // 将需要打印的模板全部放在#print元素中
    let printContent = document.getElementById("print") 
    // 暂时存储打印之前的全部页面元素
    let oldContent = document.body.innerHTML 
    // 将需打印元素渲染在页面上
    document.body.innerHTML = printContent.innerHTML 
    document.getElementsByTagName("body")[0].style.zoom = 0.92;
    setTimeout(() => {
      window.print();
      window.location.reload();
      //将原有页面还原到页面
      document.body.innerHTML = oldContent;
    }, 300);
  }

效果

ps: 批量打印时，即 #print内有多个.print-box，如果需要强制每个.print-box都另起一页，可在css中设置：

@media print {
  .print_dom {
    page-break-after:always;
  }
}