第三十三章：CSS在打印与PDF中的应用-CSS 技术揭秘与实战通关

当前位置:　首页>> 技术小册>> CSS 技术揭秘与实战通关

### 第三十三章：CSS在打印与PDF中的应用

在Web开发的世界中，CSS（层叠样式表）不仅仅是用来美化网页和增强用户体验的工具，它还扮演着在打印文档和生成PDF文件时不可或缺的角色。随着数字化办公的普及，将网页内容转换为可打印或PDF格式的需求日益增加，掌握CSS在打印与PDF中的应用技巧变得尤为重要。本章将深入探讨如何使用CSS来控制网页在打印时的表现，以及如何通过CSS和JavaScript结合生成高质量的PDF文档。

#### 33.1 引言

打印样式表（Print Stylesheets）是专门为打印媒体类型设计的CSS规则集，它们允许开发者为打印输出定制样式，而不影响屏幕上的显示。同样，生成PDF文档时，虽然过程可能涉及服务器端技术或JavaScript库，但CSS依然是控制文档外观和布局的关键。

#### 33.2 打印样式表基础

##### 33.2.1 媒体查询

在CSS中，通过媒体查询（Media Queries）可以针对不同的媒体类型和条件应用不同的样式规则。对于打印样式，我们通常使用`print`媒体类型来指定打印时应用的样式。示例如下：

```css
@media print {
  body {
    font-family: 'Times New Roman', serif;
    line-height: 1.5;
  }
  header, footer, nav, aside {
    display: none; /* 隐藏不需要打印的元素 */
  }
  .print-only {
    display: block; /* 仅打印时显示的元素 */
  }
}
```

##### 33.2.2 字体与颜色

打印时，用户通常希望文档易于阅读，因此选择合适的字体和颜色尤为重要。尽管打印机可以处理多种颜色，但黑白打印仍然是主流。因此，在打印样式表中，应尽量避免使用低对比度的颜色组合，并考虑使用适合阅读的字体大小和样式。

```css
@media print {
  color: black; /* 设置为黑色 */
  background-color: white; /* 背景色为白色 */
}
```

##### 33.2.3 页面布局

打印布局与屏幕布局有很大不同。在打印样式中，你可能需要调整边距、页面大小和方向，以确保内容适合打印纸张。CSS提供了`@page`规则来定义这些属性。

```css
@media print {
  @page {
    size: A4 portrait; /* 设置页面大小为A4纸，方向为纵向 */
    margin: 2cm; /* 设置页面边距 */
  }
}
```

#### 33.3 实战技巧

##### 33.3.1 分页控制

使用CSS的`page-break-before`、`page-break-after`和`page-break-inside`属性可以控制元素在打印时的分页行为，确保重要内容不会被分割到两页之间。

```css
@media print {
  h1 {
    page-break-before: always; /* 每个h1标题前都分页 */
  }
  table {
    page-break-inside: avoid; /* 避免表格在分页时被分割 */
  }
}
```

##### 33.3.2 隐藏与显示元素

如前所述，通过`display`属性可以控制哪些元素在打印时被隐藏或显示。这有助于去除导航栏、广告等不必要的元素，同时突出显示重要的内容。

##### 33.3.3 打印友好的样式

- **链接样式**：为链接添加文本描述（如`[链接名称](链接地址)`），以便在打印时保留链接信息。
- **图像处理**：对于重要的图像，可以考虑在打印样式中调整其大小或位置，以确保它们适合页面布局。
- **边框与背景**：去除不必要的边框和背景色，使打印内容更加清晰。

#### 33.4 CSS与PDF生成

虽然CSS主要用于控制网页的打印样式，但现代Web开发中也常通过JavaScript库（如jsPDF、Puppeteer等）结合CSS来生成PDF文件。这些工具允许开发者将HTML内容（包括CSS样式）转换为PDF格式，适用于报告、发票、电子书等多种场景。

##### 33.4.1 jsPDF示例

jsPDF是一个流行的JavaScript库，它允许你在客户端生成PDF文件。虽然jsPDF本身不直接解析CSS，但你可以通过HTML转Canvas的技术（如html2canvas）或CSS in JS（如styled-components）的方式，间接地将CSS样式应用到PDF生成中。

```javascript
// 假设你已经有了HTML内容和相应的CSS样式
const doc = new jsPDF();
// 假设有一个函数能将HTML+CSS转换为Canvas
// html2canvas(element, {/* options */}).then(canvas => {
//    const imgData = canvas.toDataURL('image/png');
//    doc.addImage(imgData, 'PNG', 15, 40, 180, 160);
//    doc.save('download.pdf');
// });
```

##### 33.4.2 Puppeteer与Chrome Headless

Puppeteer是一个Node库，它提供了高级API来控制Chrome或Chromium的无头浏览器（Headless Browser）。通过Puppeteer，你可以加载一个网页，应用自定义的CSS样式，然后截取网页的渲染结果并保存为PDF。这种方法能够更准确地模拟用户在浏览器中的所见即所得（WYSIWYG）体验。

```javascript
const puppeteer = require('puppeteer');

async function generatePDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  // 注入自定义CSS
  await page.addStyleTag({content: `body { font-family: Arial; }`});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
}

generatePDF();
```

#### 33.5 注意事项与优化

- **测试**：在不同的打印机和浏览器上测试你的打印样式，以确保兼容性。
- **性能**：在生成PDF时，特别是使用JavaScript库时，注意性能优化，避免长时间占用用户设备资源。
- **可访问性**：即使是为打印设计的样式，也应考虑无障碍阅读的需求，如使用合适的字体大小和颜色对比度。
- **兼容性**：虽然现代浏览器对CSS打印样式的支持相当完善，但仍需注意旧浏览器的兼容性问题。

#### 33.6 结论

通过本章的学习，我们深入了解了CSS在打印与PDF生成中的应用。从基础的打印样式表设置到高级的PDF生成技术，掌握这些技能将使你的Web应用更加灵活和强大。无论是为了提升用户体验，还是满足特定的业务需求，合理地使用CSS和相关的JavaScript库，都能让你的Web内容在打印和PDF格式下展现出最佳的效果。

该分类下的相关小册推荐：

从零开始学CSS与CSS3