前言
随着现代浏览器对 Material Design 支持的增强，越来越多的网站和应用程序都开始采用 Material Design 风格设计。但是，在打印内容时，网页通常会失去其在屏幕上的外观和布局。为了解决这个问题，需要在 Material Design 中实现打印样式。
在本文中，我们将探索如何在 Material Design 中实现打印样式。我们将学习如何使用 CSS 媒体查询、打印样式表和 JavaScript，以及如何在页面上添加打印按钮。
CSS 媒体查询
CSS media 查询允许我们根据设备的属性，如屏幕尺寸、屏幕比例和颜色等，为不同的媒体类型定义不同的样式。在打印中，可以使用 media 查询定义打印样式并将其应用于打印样式表中。
以下是一个简单的 CSS 媒体查询，它将在打印样式表中隐藏一个元素：
@media print {
.hidden-on-print {
display: none !important;
}
}我们使用 @media print 查询，该查询仅在打印时应用。在这个特定的例子中，我们隐藏了一个具有 .hidden-on-print 类的元素。
打印样式表
打印样式表是专门为打印而编写的样式表。它们的工作方式类似于屏幕样式表，但通常包含更多的样式和规则，以确保在打印时达到最佳效果。
以下是一个简单的打印样式表，它定义了打印时页面的布局和样式：
-- -------------------- ---- -------
------ ----- -
---- -
---------- -----
------- --
-------- --
-
------------- -
--------- ------
---- --
----- --
------ --
------- -----
----------------- --------
-------------- --- ----- -----
-------- -----
-
------------- -
--------- ------
------- --
----- --
------ --
------- -----
----------------- --------
----------- --- ----- -----
-------- -----
-
-注意，我们将每个 CSS 规则都包含在 @media print 查询内。这确保了这些规则仅在打印时应用。
此样式表定义了该页面的打印布局和样式。其中，我们定义了一个打印页眉和一个打印页脚，它们将被固定到每一页的顶部和底部。
JavaScript
有时，在打印页面之前，您可能需要进行其他操作。例如，您可能需要弹出一个对话框，让用户选择打印机。在这种情况下，您可以使用 JavaScript。
以下是一个简单的 JavaScript 片段，它将在用户点击打印按钮时弹出一个对话框：
function printPage() {
window.print();
}
document.querySelector('#printButton')
.addEventListener('click', printPage);这个例子首先定义了一个名为 printPage() 的函数，该函数简单地调用 window.print()，该函数将弹出打印机对话框并开始打印页面。然后，我们将这个函数添加到一个 ID 为 printButton 的 HTML 元素的 click 事件侦听器中。当用户单击此元素时，printPage() 函数将被执行。
示例代码
以下是一个完整的示例，其中包含了上述所有代码和技术：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------ -- -------- --------------
-------
-- ------ ------ --
---- -
---------- -----
-
-- ------ -- ------ --
----------------- -
-------- ---- -----------
-
-- ----- ------ --
------ ----- -
---- -
---------- -----
------- --
-------- --
-
------------- -
--------- ------
---- --
----- --
------ --
------- -----
----------------- --------
-------------- --- ----- -----
-------- -----
-
------------- -
--------- ------
------- --
----- --
------ --
------- -----
----------------- --------
----------- --- ----- -----
-------- -----
-
-
--------
--------
-------- ----------- -
---------------
-
--------------------------------------
-------------------------- -----------
---------
-------
------
---- ------------------- ------------------
---- -- --- ----- ------
------
---- ------------------- ------------------
---- -- --- ----- ------
------
--------- ------ -- -------- -----------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- ------ ------ ---------- --- ------ -- ------ ------ ------ ----- ------- -- ---- --- ---------- ----- --- ----- -- ------ ------- --------- --------- ---- ------- ----- -- ------ --------- --------- ---- --- ----------- ------- ------- ----------- --------- ------ ----- -------- ----- ------- --- --- ------- ------- ------- ----- ---------- ---- --- ----------- -------- ---- ----- ----- ------ -- -------- ------ ------ --- ----------
------- ---------------------- -------------
-------
-------结论
在 Material Design 中实现打印样式虽然看起来很困难，但使用 CSS 媒体查询、打印样式表和 JavaScript，我们可以方便地实现这一点。用这些技术能够让网站和应用程序在打印时可以保持美观，从而为用户提供更好的打印体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f147e16fbf960197390f11