通过 <button> 或者 <a> 标签创建一个打印按钮,并为其添加 onclick 事件监听器来触发打印操作。比如 <button onclick="window.print()">打印</button>。
在网页的 <style> 部分,添加一个 @media print 的样式块,在其中定义打印时的页面布局、字体、颜色等。这样可以确保打印输出的内容和网页显示的内容一致。
有些元素在网页上显示时很有用,但在打印时可能会影响版面。可以使用 @media print 样式隐藏这些元素,例如 @media print { .no-print { display: none; } }。
为让用户在打印前预览页面,可以使用 JavaScript 代码在点击打印按钮时打开一个新窗口,并在其中显示打印预览。这样用户可以确认打印内容是否正确。
有时候需要在打印输出中添加页眉和页脚,比如公司名称、日期等信息。这可以通过 CSS 的 @page 规则实现,例如 @page { @top-center { content: "公司名称"; } }。
