React实战(5)——Ant Design Pro项目A4纸打

1、产品需求

• 管理后台需要根据定制邀请码获得该用户基本信息，然后定制专属营养健康方案报告
• 图表要求是彩色的，如图是mac下的（只能显示黑白色），内嵌饼图图表

2、踩坑笔记

• 去掉顶部title

打印页面弹出时，布局及更多设置中的纸张尺寸可通过下方@page中设置，没有设置时纸张尺寸默认是US Letter，会导致打印机识别不了该纸张报错，也可能会挂掉，不过重启打印机就好了

// 添加css样式
@page {
  margin: 0; /* this affects the margin in the printer settings */ // 设置边距为0
  size: A4 portrait;//landscape：横向打印；portrait 纵向打印
}

• 嵌套图表时，打印当前页面导致预览时不显示，打印时自然也没有

• 使用的框架时基于Ant Design Pro，图表框架是阿里的bizchartst图表库
• 以下是打印方法，原本是把打印内容放到id为print-wrapper中，但打印预览时图表不能显示
• 将document.body.innerHTML = newContent换成oldContent打印整个body中内容图表会显示，但多余的左侧导航及头部栏也被打印出来了

printContent = () => {
  const subOutputRankPrint = document.getElementById('print-wrapper')
  const newContent = subOutputRankPrint.innerHTML
  const oldContent = document.body.innerHTML
  document.body.innerHTML = newContent
  window.print();
  window.location.reload();
  document.body.innerHTML = oldContent;
  return false;
};

解决办法(两种方案)：

• 将左侧菜单，顶部导航及搜索框隐藏掉（采用的这种方式）

printContent = () => {
    // 左侧导航栏隐藏
    const menuNodes = document.getElementsByClassName('ant-pro-sider-menu-sider');
    for (let i = 0; i < menuNodes.length; i += 1) {
      menuNodes[i].style.display = 'none';
    }
    // 右侧content设置padding-left为0
    const rightPaddingNodes = document.getElementsByClassName('ant-layout');
    for (let i = 0; i < rightPaddingNodes.length; i += 1) {
      rightPaddingNodes[i].style.paddingLeft = '0';
    }
    // header导航隐藏
    const headerNodes = document.getElementsByClassName('ant-layout-header');
    for (let i = 0; i < headerNodes.length; i += 1) {
      headerNodes[i].style.display = 'none';
    }
}

• 将图表canvas画布绘制成图片在打印的时候替换掉原来的图表（未尝试，理论上是可以实现的）