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

Question

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

我尝试使用媒体查询@print在 CSS 中，以便使用我的浏览器打印框将 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?

您可能会找到您需要的东西。