CSS制作PDF文件
CSS制作PDF文件的方法
使用CSS生成PDF文件通常需要结合HTML和特定的工具或库。以下是几种常见的方法：
使用浏览器打印功能
将HTML页面设计为适合打印的样式，通过浏览器的“打印”功能选择“另存为PDF”选项。需要针对打印优化CSS样式。
@media print {
body {
margin: 0;
padding: 0;
font-size: 12pt;
}
.no-print {
display: none;
}
}使用Puppeteer或Playwright
这些工具可以控制Headless Chrome或Chromium浏览器，将HTML页面渲染为PDF。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('file:///path/to/your/html', {waitUntil: 'networkidle2'});
await page.pdf({
path: 'output.pdf',
format: 'A4',
margin: {
top: '1cm',
bottom: '1cm',
left: '1cm',
right: '1cm'
}
});
await browser.close();
})();使用jsPDF
jsPDF是一个JavaScript库，可以直接在浏览器中生成PDF文件。
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('output.pdf');使用CSS Paged Media模块
CSS Paged Media模块提供了专门用于分页媒体的CSS属性，可以与PrinceXML等工具配合使用。
@page {
size: A4;
margin: 1cm;
@top-center {
content: "Header";
}
@bottom-center {
content: counter(page);
}
}使用wkhtmltopdf
wkhtmltopdf是一个命令行工具，可以将HTML转换为PDF，支持CSS和JavaScript。
wkhtmltopdf input.html output.pdf注意事项
为获得最佳效果，建议使用专门为打印设计的CSS单位如cm、mm或pt，而非屏幕单位px。
页面尺寸应明确指定，常见的打印尺寸包括A4、Letter等。
测试不同工具的渲染效果，某些CSS属性在不同工具中的支持程度可能不同。
考虑添加页码、页眉页脚等打印元素，提升PDF的专业性。
