Vue3+TypeScript+printjs 实现标签批量打印功能

在现代前端开发中，Vue3 和 TypeScript 已经成为了非常流行的组合。尤其是在需要处理复杂状态和类型的应用程序中，Vue3 的响应式系统和 TypeScript 的类型检查可以帮助开发者提高代码的可维护性和稳定性。在本文中，我们将探讨如何使用 Vue3 和 TypeScript 结合 Print.js 实现标签的批量打印功能。

一、搭建项目环境

首先，我们需要搭建一个使用 Vue3 和 TypeScript 的项目。可以使用 Vue CLI 进行快速搭建：

npm install -g @vue/cli
vue create label-printer

在选择特性的时候，确保勾选了 TypeScript，同时选择 Vue 3.x。

接下来，我们安装 Print.js 库，用于打印功能：

npm install print-js

二、构建打印标签组件

接下来，我们将构建一个基本的打印标签组件，允许用户输入多个标签，并进行批量打印。

在 src/components 目录下创建 LabelPrinter.vue：

<template>
  <div>
    <h1>标签批量打印</h1>
    <textarea v-model="labels" placeholder="输入标签，每行一个"></textarea>
    <button @click="printLabels">打印标签</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import print from 'print-js';

export default defineComponent({
  name: 'LabelPrinter',
  setup() {
    const labels = ref('');

    const printLabels = () => {
      const labelArray = labels.value.split('\n').map(label => label.trim()).filter(label => label);

      // 生成打印内容
      const printContent = labelArray.map(label => `<div style="font-size:24px; margin-bottom:10px;">${label}</div>`).join('');

      // 使用 Print.js 打印
      const blob = new Blob([printContent], { type: 'text/html' });
      print({
        printable: blob,
        type: 'html',
        style: 'body { font-family: Arial; }',
      });
    };

    return {
      labels,
      printLabels,
    };
  },
});
</script>

<style scoped>
textarea {
  width: 100%;
  height: 150px;
}
button {
  margin-top: 10px;
}
</style>

三、解释代码

1. 组件结构：我们构建了一个基本的 Vue 组件，包含一个 textarea 供用户输入标签，以及一个按钮用于触发打印操作。

2. 数据绑定：使用 ref 创建响应式变量 labels 来存储用户输入的标签。

3. 打印逻辑：printLabels 方法首先将用户输入的字符串按行分割，过滤掉空行。接着将每个标签转换为 HTML 格式的 <div>，并使用 Print.js 的 print 方法进行打印。

4. 打印样式：在打印时定义了一些基本的样式，以确保标签的清晰度和可读性。

四、集成到应用中

然后，我们需要在应用的主组件中使用这个打印标签组件。在 src/App.vue 中引入并使用：

<template>
  <div id="app">
    <LabelPrinter />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import LabelPrinter from './components/LabelPrinter.vue';

export default defineComponent({
  name: 'App',
  components: {
    LabelPrinter,
  },
});
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

五、运行项目

最后，运行项目以查看效果：

npm run serve

打开浏览器查看 http://localhost:8080，在 textarea 中输入要打印的标签，每行一个，然后点击“打印标签”按钮，即可完成批量打印。

六、总结

本文介绍了如何结合 Vue3、TypeScript 和 Print.js 实现一个简单的标签批量打印功能。通过这种方式，开发者可以快速构建出符合需求的打印功能，同时借助 TypeScript 提高代码的安全性和可维护性。希望这对你的项目有所帮助！