html - 打印友好的网络简历

Question

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

我的网站是:https://maschmeyer.ca 我的 GitHub 是:https://github.com/sheldonmaschmeyer/website-sheldon 修改 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 - 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;
  }
}