【Vue + Print.js】前端打印， 自定义字体大小， 自定义样式， 封装共享样式

在前端开发中，打印功能是一个常见的需求，尤其是在生成报表、打印用户资料或者导出文档时，通常需要通过前端代码进行打印。Print.js 是一个非常流行的 JavaScript 库，它提供了简单而强大的打印功能，允许你灵活控制打印内容、样式以及自定义功能。

本篇文章将介绍如何在 Vue 项目中结合 Print.js 实现前端打印功能，并展示如何自定义字体大小、样式，甚至封装共享样式，达到灵活打印需求。

1. 安装 Print.js

首先，我们需要安装 Print.js 库。可以通过 npm 或者直接使用 CDN 链接来引入。

使用 npm 安装：

npm install print-js --save

使用 CDN 引入：

2. 在 Vue 中使用 Print.js

安装完成后，我们可以在 Vue 项目中使用 Print.js 来实现打印功能。这里我们将使用 Print.js 来打印一个包含自定义样式的页面。

示例：基本打印功能

解释：

• printJS：调用 Print.js 的方法来启动打印。
• printable：指定需要打印的元素的 ID（此处为 #printArea）。
• type：指定打印类型，这里选择 html，即打印 HTML 元素。
• style：通过内联样式来自定义打印页面的样式，包括字体、颜色、大小等。

  点击“打印文档”按钮后，打印机将根据提供的样式打印出该文档。

  3. 自定义字体大小和样式

  为了进一步控制打印内容，我们可以为不同的元素设置自定义的字体大小、颜色等样式。例如，在打印文档时，我们希望标题和段落的字体大小不同，且拥有不同的颜色。

  示例：自定义字体大小和样式

  解释：

  • h1 标签的字体大小设置为 24px，颜色设置为蓝色。
  • p 标签的字体大小设置为 16px，颜色设置为灰色。

    通过这样的自定义样式，我们可以灵活地调整每个元素的样式，使其在打印时符合需求。

    4. 封装共享样式

    如果你希望多个页面共享一组样式（例如，所有打印页面都使用相同的字体和样式），可以将样式提取成一个共享的 CSS 文件，或者在 Print.js 配置中使用外部样式表。这样做不仅能提高代码的复用性，还能确保样式的一致性。

    示例：封装共享样式

    1. 创建一个共享的样式文件 print-style.css

    /* print-style.css */
    .print-header {
      font-size: 24px;
      color: #3498db;
    }
    .print-body {
      font-size: 16px;
      color: #7f8c8d;
    }
    .print-footer {
      font-size: 12px;
      color: #bdc3c7;
    }
    

    2. 在 Vue 组件中引入该样式

    解释：

    • 我们将样式提取到一个外部文件 print-style.css 中，并在 Vue 组件中引入。
    • printJS 配置中通过 @import 引入该共享样式，确保打印时使用统一的样式。

      5. 总结

      本文介绍了如何在 Vue 项目中使用 Print.js 来实现前端打印功能。通过以下几个方面的实践，你可以灵活地控制打印内容：

      1. 基础打印功能：简单的打印元素。
      2. 自定义字体大小和样式：为不同元素设置自定义样式，控制字体、颜色和其他样式。
      3. 封装共享样式：通过外部 CSS 文件或 Print.js 的样式配置，实现多个打印页面的样式共享。

      通过这些技巧，你可以让前端打印功能更加灵活和个性化，满足不同场景下的需求。