如何使用 vue-plugin-hiprint 打印 并排标签

Question

标签纸是两排标签，每个大小16mm*8mm。目前没有思路，提供思路也可以采用

Answer 1

要使用 vue-plugin-hiprint 在 Vue 应用中打印并排标签，你可以按照以下步骤进行操作：

    安装 vue-plugin-hiprint 包。可以使用 npm 或 yarn 进行安装：
    bash

npm install vue-plugin-hiprint

或
bash

yarn add vue-plugin-hiprint

在你的 Vue 项目中注册 vue-plugin-hiprint 插件。在你的 main.js 或类似的入口文件中添加以下代码：
javascript

import Vue from 'vue'
import VuePluginHiprint from 'vue-plugin-hiprint'

Vue.use(VuePluginHiprint)

创建一个包含要打印标签的组件。例如，你可以创建一个名为 PrintLabels.vue 的组件，并在其中定义要打印的标签布局。
vue

<template>
  <div>
    <div class="label">
      <p>Label 1</p>
    </div>
    <div class="label">
      <p>Label 2</p>
    </div>
  </div>
</template>

<style scoped>
.label {
  width: 100mm;
  height: 50mm;
  border: 1px solid black;
  display: inline-block;
  margin-right: 10mm;
}
</style>

在上述示例中，我们创建了两个具有相同样式的标签，并使用 CSS 进行布局。

在你的页面中使用 hiprint 指令来打印标签。在你的页面模板中添加以下代码：
vue

<template>
  <div>
    <button @click="printLabels">Print Labels</button>
  </div>
</template>

<script>
export default {
  methods: {
    printLabels() {
      this.$hiprint.print({
        component: 'PrintLabels',
        copies: 2, // 打印两份
        layout: 'landscape' // 设置横向打印
      })
    }
  }
}
</script>

在上述示例中，我们在点击按钮时调用 printLabels 方法，并使用 $hiprint.print 方法来触发打印操作。我们指定了要打印的组件名称为 'PrintLabels'，打印两份标签，并设置横向打印布局。

运行你的 Vue 应用，并点击 "Print Labels" 按钮，即可触发打印操作并在打印预览中看到并排的标签。