CSS制作PDF文件
使用CSS生成PDF文件的方法
CSS可以结合HTML和JavaScript工具将网页内容转换为PDF文件。以下是几种常见的方法：
使用浏览器打印功能
现代浏览器支持通过打印功能将网页保存为PDF文件。通过CSS的@page规则和print媒体查询可以优化PDF输出样式。
@media print {
body {
margin: 0;
padding: 0;
font-size: 12pt;
}
@page {
size: A4;
margin: 2cm;
}
}使用jsPDF库
jsPDF是一个流行的JavaScript库，可以从HTML内容生成PDF。结合html2canvas可以先将HTML渲染为Canvas再转换为PDF。
// 示例代码
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
const element = document.getElementById('content');
html2canvas(element).then(canvas => {
const pdf = new jsPDF();
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0);
pdf.save('document.pdf');
});使用Puppeteer
Puppeteer是一个Node库，可以控制Headless Chrome生成PDF。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://example.com', {waitUntil: 'networkidle2'});
await page.pdf({
path: 'page.pdf',
format: 'A4',
printBackground: true
});
await browser.close();
})();使用CSS Paged Media模块
专业的PDF生成工具如PrinceXML支持CSS Paged Media模块，提供更精细的PDF控制。
@page {
size: 8.5in 11in;
margin: 0.5in;
@bottom-center {
content: counter(page);
}
}关键CSS属性
以下属性对PDF生成特别有用：
page-break-before/page-break-after: 控制分页size: 定义页面尺寸margin: 设置页边距@page: 定义页面规则orphans/widows: 控制段落换行
注意事项
- 使用相对单位(如cm/in)而非像素
- 明确设置所有元素的打印样式
- 测试不同工具的输出效果
- 考虑添加打印专用的CSS文件
