window.print() 导出pdf的一些注意事项及总结

  • 一、默认打印背景
// css 打印设置
@media print {
  body {
    height: auto !important; // 打印必须设置成auto,否则只会打印第一页
    -webkit-print-color-adjust: exact; // 默认打印背景
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
  }
  @page {
    size: 1240px 1754px; // 纸张大小 a4比例
  }
}

通过css的样式设置,默认打印背景;如果涉及到分页的话body的高度要设置成auto,否则可能只会打印第一页。@page 可以任意设置纸张的大小;

  • 二、分页设置
    page-break-before: 指定元素之前加入分页符;page-break-after:指定元素之后加入分页符;可选参数如下:
    page-break-inside:用于设置是否在指定元素中插入分页符,参数如下:
// css 
.box {
  page-break-after: auto; // box 的后面自动分页
  page-break-inside: avoid; // box 里面禁止分页
}
  • 三、设置背景图
    时常需要一些logo之类的加在页头或者页脚,可以利用定位的方式去处理;


  



  
第1部分
第2部分
第3部分
第4部分
  • 关于表格打印的思路
    前几天的需求,我的做法是将数据分成每30条一页,每页单独渲染一个表;如果数据太大的话可能影响性能。
// jsx  react + antd
{ tableDatas.length > 0 && Array.from({length: Math.ceil(tableDatas.length / 30)}).map((item, index) => { return
eIndex >= index * 30 && eIndex < (index + 1) * 30)} columns={[]} pagination={false} /> }) }

你可能感兴趣的:(window.print() 导出pdf的一些注意事项及总结)