CSS制作PDF文件
CSS制作PDF文件的方法
使用CSS制作PDF文件可以通过多种工具和技术实现，以下是几种常见的方法：
使用浏览器打印功能
现代浏览器支持将网页直接保存为PDF文件。在CSS中，可以通过@page规则和print媒体查询优化打印样式。例如：
@media print {
body {
font-size: 12pt;
margin: 0;
}
@page {
size: A4;
margin: 1cm;
}
}使用Puppeteer或Headless Chrome 通过无头浏览器（如Puppeteer）可以将HTML和CSS渲染为PDF。示例代码：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent('<html><body><h1>Hello PDF</h1></body></html>');
await page.pdf({ path: 'output.pdf', format: 'A4' });
await browser.close();
})();使用wkhtmltopdf wkhtmltopdf是一个开源工具，可将HTML转换为PDF。支持CSS和JavaScript。安装后通过命令行使用：
wkhtmltopdf input.html output.pdf使用CSS Paged Media模块 CSS Paged Media模块专为分页内容设计，支持高级PDF生成功能。例如：
@page {
size: A4;
margin: 2cm;
@top-center {
content: "Header Text";
}
@bottom-right {
content: counter(page);
}
}使用JavaScript库（如jsPDF） jsPDF等库可以直接在浏览器中生成PDF。结合HTML2Canvas可以捕获DOM元素：
import { jsPDF } from 'jspdf';
const doc = new jsPDF();
doc.text('Hello PDF!', 10, 10);
doc.save('output.pdf');注意事项
- 打印样式需单独优化，避免屏幕样式干扰。
- 分页控制可使用
page-break-before、page-break-after等CSS属性。 - 字体嵌入需确保PDF中显示一致，建议使用Web安全字体或嵌入字体文件。
以上方法可根据项目需求选择，浏览器打印和wkhtmltopdf适合简单场景，Puppeteer和jsPDF适合需要编程控制的场景。
