简介
paper-css 是一个用于生成打印样式的 npm 包。它提供了一系列 CSS 类和工具函数，可以快速而简便地调整网页在打印时的排版和样式。
安装和使用
安装
在命令行中运行以下命令即可安装 paper-css：
npm install paper-css --save
引入
在需要使用 paper-css 的文件中，可以通过以下方式引入：
import "paper-css";
或者，在 HTML 文件中引入：
<link rel="stylesheet" href="node_modules/paper-css/paper.css">
使用
页面设置
paper-css 提供了几个 CSS 变量，用于设置页面的大小、方向等信息。在需要使用这些变量的元素上，可以使用 var() 函数来引用它们。
例如，在需要将页面设置为 A4 纸张大小、纵向排版时，可以这样写：
@media print {
@page { size: A4; }
body { margin: 0; }
.sheet { height: 297mm; width: 210mm; }
}
.sheet { page-break-after: always; }其中，@page 规则用于设置打印页面的大小和方向，body 元素的 margin 属性用于去除默认的边距，.sheet 是一个自定义的 CSS 类，表示每一页。
打印样式
paper-css 还提供了一些打印相关的 CSS 类，用于调整打印时元素的隐藏、位置、字体等样式。例如：
.print-only：只在打印时显示；.page：用于包裹每一页；.text-center：居中文本；.text-bold：加粗文本；.text-italic：斜体文本；.text-underline：下划线文本；.text-left：左对齐文本；.text-right：右对齐文本；.font-normal：普通字体；.font-serif：衬线字体；.font-sans-serif：非衬线字体；
例如：
-- -------------------- ---- -------
---- ------------ --------------
--- -------------------------------
--------------
-- -----------------------------------
------ ------------ ---------------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------
------
-------
------ ----- -
----- - ----- --- -
---- - ------- -- -
------ - ------- ------ ------ ------ -
-
------ - ----------------- ------- -
------------ - ----------- ------- -
----------- - ------------ ------ -
--------以上示例中，.padding-10mm 是一个自定义的 CSS 类，用于设置元素内边距为 10mm。
总结
使用 paper-css 可以轻松地调整网页在打印时的排版和样式。通过设置页面大小和方向、使用打印相关的 CSS 类，可以实现各种打印需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35854