打印友好的web简历

Question

我正在尝试为Bootstrap 4模板简历/CV添加打印友好的功能。我想在打印时减小各部分之间的间距。因此，从网站上，可以打印成PDF并转换成word文档。

我的网站是：https://maschmeyer.ca My GitHub is：https://github.com/sheldonmaschmeyer/website-sheldon Modifying resume.min.css，我有一个更便于打印的页面，但它并不完全正确。我希望能够编辑网站，并通过打印机友好的渲染，创建PDF和/或Word文档。因此，较少的维护问题(不同的版本)；实际上，LinkedIn等更改是足够耗时的。

这就是我到目前为止所做的：

@media print {
  @page {
    size: Letter portrait;
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
    margin-left: 1.5cm;
    margin-right: 1.5cm;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
  }
  section.resume-section {
    page-break-before: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
}

@page部分将日期(例如，Jane 2014 -2015 Jan 2015)从显示时的右侧移动到打印时该子部分的底部。这是我不想要的。每个部分之间有太多的空间，用于打印。我将尝试在固定部分间距后调整字体大小。理想情况下，我想压缩部分，将忽略最后一节，‘服务’，打印成两页。

总结一下，下面是打印预览的屏幕截图。我想在打印时减小/删除部分间距。在屏幕上查看时，部分间距非常棒，但不能转换为纸张我正在使用的样式表是：https://github.com/sheldonmaschmeyer/website-sheldon/blob/master/css/resume.min.css

Print-Preview in Chrome screenshot

Answer 1

解决了它，只需要考虑一下。

@media print {
  @page {
    size: Letter portrait;
    margin: 0.5cm;
  }
  body {
    padding-top: 6rem!important;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
  }
  .m-0,
  .m-0 *,
  .dont-print,
  .dont-print * {
    display: none!important;
  }
  section.resume-section {
    margin-top: -10rem!important;
    padding-top: 0rem!important;
    padding-bottom: 0rem!important;
    page-break-after: avoid;
  }
}