【vue+printJs】前端打印, 自定义字体大小, 自定义样式, 封装共享样式

在现代前端开发中，打印功能是一个常见但经常被忽视的需求。特别是当用户需要打印特定的报告、发票或者其他文档时，如何确保打印格式的美观和专业成为了一个重要的问题。在这篇文章中，我们将探讨如何使用 Vue.js 和 Print.js 来实现前端打印，并对如何自定义字体大小和样式进行封装共享进行深入了解。

安装 Print.js

首先，确保你已经在项目中安装了 Print.js。可以通过 npm 安装：

npm install print-js --save

Vue 组件示例

下面是一个简单的 Vue 组件示例，它展示了如何使用 Print.js 打印 HTML 内容，并支持自定义样式和字体大小。

<template>
  <div>
    <h1>打印示例</h1>
    <button @click="print">打印内容</button>
    <div ref="printArea" class="print-area">
      <h2>打印区域</h2>
      <p>这是一些将被打印的内容。</p>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js';

export default {
  methods: {
    print() {
      printJS({ 
        printable: this.$refs.printArea,
        type: 'html',
        style: this.getPrintStyles(),
      });
    },
    getPrintStyles() {
      return `
        .print-area {
          font-size: 14px; /* 自定义字体大小 */
          line-height: 1.5; /* 行高 */
          color: #333; /* 字体颜色 */
          margin: 20px; /* 外边距 */
        }
        h2 {
          font-size: 20px; /* 标题字体大小 */
          font-weight: bold; /* 粗体 */
        }
        p {
          margin: 0; /* 段落外边距 */
        }
      `;
    }
  }
}
</script>

<style>
.print-area {
  display: none; /* 隐藏打印区域 */
}
</style>

代码解析

1. 模板部分：我们使用了一个按钮来触发打印操作，并在按钮下方定义了一个 div，其内容将会被打印。

2. 打印方法：在 print 方法中，我们调用 printJS，并传递需要打印的内容（这里是通过 this.$refs.printArea 拿到的 div）和样式。在 style 属性中，我们可以添加自定义的 CSS 样式（如字体大小、颜色等）。

3. 样式获取：使用 getPrintStyles 方法返回自定义的 CSS 样式字符串，我们为打印内容定义了一些基本的样式，包括字体大小、行高和颜色等。

4. 样式隐藏：在组件的 style 部分，我们将打印区域设置为 display: none;，这样在普通页面中不会显示这个区域。

自定义共享样式

为了提升样式的复用性，我们可以将样式封装到一个单独的 CSS 文件中，或者通过 Vue 的 scoped 样式进行优化，下面是一个 CSS 文件的示例。

/* print-styles.css */
.print-area {
  font-size: 14px; /* 自定义字体大小 */
  line-height: 1.5; /* 行高 */
  color: #333; /* 字体颜色 */
  margin: 20px; /* 外边距 */
}

.print-area h2 {
  font-size: 20px; /* 标题字体大小 */
  font-weight: bold; /* 粗体 */
}

.print-area p {
  margin: 0; /* 段落外边距 */
}

然后在 Vue 组件中引入这个样式文件，并在打印方法中直接调用。

总结

通过以上示例，可以看到如何简单地将 Print.js 与 Vue.js 结合使用，实现前端打印功能，并自定义打印样式。这种封装和共享样式的方式，不仅提高了代码的重用性，也令打印内容在不同场合下保持一致的风格。无论是用于内部报告、发票打印还是任何需要输出的内容，这种方法都能帮助开发者在保证美观的同时，提高开发效率。