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

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

  //  点击打印按钮
  handlePrint = async () => {
    const { data } = await printtaxinvoice({ id: this.props.location.state.id })
    this.setState({ printData: data }, () => this.getPrint()) // 获取打印数据之后再调用window.print()
  }
  // 执行打印
  getPrint = () => {
    let printContent = document.getElementById("print") // 将需要打印的模板全部放在#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);
  }

效果：

image.png

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

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