Question

我正在尝试向Bootstrap 4模板简历/简历添加易于打印的功能。在打印时，我想减小各部分之间的间距。因此，可以从网站上打印为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;
  }
}

打印友好的Web简历

1 个答案: