【更新】PDF导出代码片段分享

分享一个自己在用的PDF导出CSS代码

:tada:新增功能:

  1. 手动分页功能,在正文里添加 <div class="page-break"></div> 实现手动分页
  2. 优化大标题显示,现在居中显示并匹配主题颜色

主要改动:

  1. 强制了所有标题为黑色,其他内容颜色保持原样
  2. 替换了callout样式并对齐内容
  3. 英文字体强制为Time new Roman,中文字体为宋体
  4. 行间距与段间距和标题间距采用国际标准
  5. 各级标题起始会智能分页
  6. 优化表格全宽显示
  7. 增加了页码显示


代码片段

@media print {
  /* ========== 基础国际标准设置 ========== */

  @page {
    @bottom-center {
      content: counter(page);
      font-size: 12pt !important;
    }
  }

  body {
    /* 布局相关 */
    margin: 2.5cm 1.5cm 1.5cm 2cm !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 21cm !important;
    margin: 0 auto !important; /* 确保居中 */
    
    /* 字体和文本相关 */
    font-family: "Times New Roman", "Times", serif !important;
    line-height: 1.5 !important;
    color: #000 !important;
    background: #fff !important;
    text-align: justify !important;
  }

  /* 语言样式 - 只覆盖字体,不覆盖布局 */
  :lang(zh), :lang(zh-Hans), :lang(zh-Hant) {
    font-family: "SimSun", "宋体", "Times New Roman", serif !important;
  }
  :lang(ja) {
    font-family: "MS Mincho", "SimSun", "Times New Roman", serif !important;
  }
  :lang(ko) {
    font-family: "Batang", "SimSun", "Times New Roman", serif !important;
  } 

  /* 手动分页功能 在文档里添加 "<div class="page-break"></div>" 实现手动控制分页*/
  .page-break, .manual-break, [data-break] {
    page-break-before: always !important;
    break-before: page !important;
    display: block !important;
    height: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  
  /* 重置可能的冲突 */
  body * {
    page-break-inside: auto !important;
  }

  /* ========== 标题标准化 ========== */
  h1 {
    font-size: 20pt !important;
    font-weight: bold !important;
    margin-top: -9pt !important;
    margin-bottom: 24pt !important;
    page-break-after: avoid !important;
    text-align: center !important;
  }
  
  h2 {
    font-size: 15pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-top: 18pt !important;
    margin-bottom: 9pt !important;
    page-break-after: avoid !important;
  }
  
  h3, h4, h5, h6 {
    font-size: 12pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-top: 12pt !important;
    margin-bottom: 6pt !important;
    page-break-after: avoid !important;
  }

  /* ========== 段落和文本标准化 ========== */
p {
  margin: 0 0 12pt 0 !important;
  text-indent: 1.25cm !important;
  orphans: 3 !important;
  widows: 3 !important;
  font-size: 13pt !important; /* 设置正文字号 */
}
  
  /* 首段不缩进 */
  p:first-child,
  div > p:first-child,
  section > p:first-child {
    text-indent: 0 !important;
  }
  
  /* ========== 引用和注释标准化 ========== */
  blockquote {
    margin: 12pt 0 12pt 1.5cm !important;
    padding: 6pt 12pt !important;
    border-left: 3pt solid #ccc !important;
    font-style: italic !important;
    background-color: transparent !important;
  }
  
  /* ========== 表格标准化 ========== */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 12pt auto !important;
    page-break-inside: avoid !important;
  }
  
  th, td {
    border: 1pt solid #000 !important;
    padding: 6pt 8pt !important;
    text-align: left !important;
  }
  
  th {
    font-weight: bold !important;
    background-color: #f0f0f0 !important;
  }

  /* ========== 代码块标准化 ========== */
  pre, code {
    font-family: "Courier New", monospace !important;
    font-size: 11pt !important;
  }
  
  pre {
    background-color: #f8f8f8 !important;
    border: 1pt solid #ddd !important;
    padding: 12pt !important;
    margin: 12pt 0 !important;
    overflow: auto !important;
    page-break-inside: avoid !important;
  }

  /* ========== 列表标准化 ========== */
  ul, ol {
    margin: 12pt 0 12pt 1.5cm !important;
    padding: 0 !important;
  }
  
  li {
    margin: 3pt 0 !important;
    padding: 0 !important;
    font-size: 13pt !important; /* 设置列表字号 */
  }

  /* ========== Callout标准化 ========== */
  .callout {
    font-family: "Times New Roman", "Times", serif !important;
    border: 1pt solid #ddd !important;
    border-radius: 0 !important;
    margin: 12pt 0 !important;
    page-break-inside: avoid !important;
    background-color: #f9f9f9 !important;
    break-inside: avoid !important;
  }

  .callout-title {
    display: flex !important;
    align-items: center !important;
    font-weight: bold !important;
    padding: 8pt 10pt !important;
    border-bottom: 1pt solid #eee !important;
    background-color: #f0f0f0 !important;
    font-size: 12pt !important;
    color: #000 !important;
  }

  .callout-icon {
    display: inline-flex !important;
    margin-right: 8pt !important;
    color: #000 !important;
  }

  .callout-content {
    padding: 10pt !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }

  /* ========== 链接处理 ========== */
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
    word-break: break-all;
  }

  /* ========== 分页控制 ========== */
  table, figure, pre, .callout {
    page-break-inside: avoid !important;
  }
  
  /* 避免在段落中间分页 */
  p {
    page-break-inside: avoid !important;
  }
  
  /* 章节开头强制新页 */
  h1 {
    page-break-before: always !important;
  }
}

2 个赞