需求：由于原型中发票的样式有一丢丢复杂，所以我们采用后端提供数据，前端编排打印模板的方案来实现。
方案：前端采用浏览器默认的打印方法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;
}
}
