在前端开发中，经常需要使用 bootstrap 进行页面的布局和样式的处理。而在实际工作中，需要将页面打印出来，以供用户保存或打印。
在这种情况下，我们可以使用一个 npm 包——bootstrap-print，来帮助我们快速实现打印功能。
安装
安装 bootstrap-print 非常简单，只需要使用 npm 进行安装即可。
--- ------- --------------- ------
引入 bootstrap-print
在你的项目中引入 bootstrap-print，需要在你的 HTML 文件中添加以下代码：
----- ---------------- --------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------
同时，在您的 JavaScript 文件中添加以下代码：
------ ------------------
使用
要将页面打印出来，只需要使用 window.print() 即可。
但是，我们可能不希望打印出所有的内容（例如，隐藏某些元素）。
这时，我们可以在需要打印的元素上添加 data-print="true" 属性。例如：
---- ------------------ --- --------------------------------- ------------------ ------
在进行打印时，只有带有 data-print="true" 属性的元素会被打印出来。
高级用法
你可以使用以下可选参数来自定义打印效果：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | 'Print Document' | 打印窗口的标题 |
| targetStyles | string[] | [] | 指定需要打印的样式列表。如果没有指定，则打印所有的样式。 |
| prependStyle | string | '' | 添加到打印页面头部的附加样式 |
| appendStyle | string | '' | 添加到打印页面尾部的附加样式 |
例如，如果要指定需要打印的样式列表，可以添加以下代码：
------ ------------------ ----- ------- - - ------ --- ------- ------------- ------------------- -- ------------------- - - ------ --- ------- ------------- --- ------------ --- ------------- --- --
在对应的 HTML 标签上，我们需要添加 my-print-style 类来指明需要打印的元素。
---- ---------------- ---------------- --- --------------------------------- ------------------ ------
结论
使用 bootstrap-print，可以很方便地实现页面打印功能，并且可以进行一些高级的自定义。
在实际开发中，我们只需要在需要打印的元素上添加 data-print="true"，就可以实现打印功能了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005523881e8991b448cfbf6