小小飞
1
分享一个自己在用的PDF导出CSS代码
新增功能:
- 手动分页功能,在正文里添加
<div class="page-break"></div>
实现手动分页
- 优化大标题显示,现在居中显示并匹配主题颜色
主要改动:
- 强制了所有标题为黑色,其他内容颜色保持原样
- 替换了callout样式并对齐内容
- 英文字体强制为Time new Roman,中文字体为宋体
- 行间距与段间距和标题间距采用国际标准
- 各级标题起始会智能分页
- 优化表格全宽显示
- 增加了页码显示
代码片段
@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 个赞