使用 HTML/CSS 创建可打印文档

Question

有没有办法使用 HTML/CSS 来描述可打印的文档（例如 A4 大小）？ 在 HTML5 中，我们有 <header>、<footer> 和大量可用于构建文档的元素，但我想知道我是否可以输出使用 Web 技术显示内容的 PDF 文档。

我尝试在 CSS 中使用媒体查询 @print 以便使用我的浏览器打印框将 HTML 文件输出为 PDF，但在我看来这个解决方案不是很好（在页脚中显示页码或脚注） .

此外，使用不同的浏览器渲染是不一样的，我希望我的文档都是一样的。

Answer 1

@print 是最好的解决方案：

@media print {
    body * {
        visibility: hidden;
    }
    #section-to-print, #section-to-print * {
        visibility: visible;
    }
    #section-to-print {
        position: absolute;
        left: 0;
        top: 0;
    }
}

在此处查看所有可能的解决方案： Print <div id=printarea></div> only?

你可能会找到你需要的。