【vue3】前端实现 生成条形码并调用打印机打印

参考文章：前端实现 生成条形码并调用打印机打印

开发技术栈vue3+vite+setup

实现功能，批量选择数据–>生成条形码—>调用打印机–>打印输出

一、生成条形码：

1.安装所需要插件

npm i jsbarcode

2. 引入

import JsBarcode from 'jsbarcode'

3. 使用

 // html 部分
<svg ref="barcodeRef"></svg>
 
// js部分
 
import{ref, onMounted} from 'vue'
import JsBarcode from 'jsbarcode'
 
const barcodeRef=ref(null)
const text = '123456789'
const options= {
    // format: 'EAN13', // 格式
    height: 50,
    // text: "覆盖显示的文本",
    fontSize: 16,
    // background: '#ccc',
     lineColor: 'black'
}
JsBarcode(barcodeRef.value, text , options)

具体相关条形码配置options，请参考jsbarcode - npm

二，调用打印机打印条形码

1.安装所需要插件

 npm i vue-print-nb

2. 引入

main.js文件

import print from 'vue3-print-nb'
 
const app = createApp(App)
app.use(print)
...
app.mount('#app')

3. 使用

 // html 部分
 <div ref="printTest" id="printTest">
    <div> 这里就是你所要打印的内用</div>
    <el-button v-print="printObj">打印</el-button>
  </div>
// js部分
 
import{ref, onMounted} from 'vue'
 
const printObj = reactive({
  id: 'printTest', // 绑定打印区域的id
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue) {
    vue.printLoading = false
    console.log('执行了打印')
  },
  closeCallback(vue) {
    console.log('关闭了打印工具')
  }
})

具体相关条形码配置printObj，请参考vue-print-nb - npm

在打印预览的时候发现，条形码并不是一码一页，以及存在打印预览中会看到在纸张的上下页眉和页脚中有日期及其他的文字内用，该怎么去掉；

别着急！！！

 // 1.实现一码一页打印
 <div ref="printTest" id="printTest">
    <div> 
        这里就是你所要打印的内用
 
         <!-- 换页打印 -->
        <p style="page-break-after: always"></p>
    </div>
    <el-button v-print="printObj">打印</el-button>
  </div>
 
 
// 去掉页眉和页脚
通过媒体查询，css来解决
<style lang="less">
@media print {
  @page {
    size: auto; /* 重置页面大小，避免出现空白页 */
    margin-top: 0; /* 取消页眉 */
    margin-bottom: 0; /* 取消页脚 */
    margin-left:0; margin-right:0;  /* 取消默认的左右页边距 */
  }
}
</style>

三，完整代码实现批量打印条形码

<template>
  <div>
    <div id="printTest">
      <div v-for="(item, index) in data" :key="index">
        <svg ref="barcodeList"></svg>
        <!-- 换页打印 -->
        <p style="page-break-after: always"></p>
      </div>
    </div>
    <el-button v-print="printObj">打印</el-button>
  </div>
</template>
 
<script setup>
import JsBarcode from 'jsbarcode'
import { ref, reactive, onMounted } from 'vue'
 
const printObj = reactive({
  id: 'printTest', // 绑定打印区域的id
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue) {
    vue.printLoading = false
    console.log('执行了打印')
  },
  closeCallback(vue) {
    console.log('关闭了打印工具')
  }
})
 
// 批量要打印的数据
const data = ref(['123456789', '987654321'])
 
const options = {
  // format: 'EAN13', // 格式
  height: 50,
  // text: "覆盖显示的文本",
  fontSize: 16,
  // background: '#ccc',
  lineColor: 'black'
}
 
const barcodeList = ref([])
onMounted(() => {
  data.value.forEach((item, index) => {
    JsBarcode(barcodeList.value[index], item, options)
  })
})
</script>
 
<style lang="less">
@media print {
  @page {
    size: auto; /* 重置页面大小，避免出现空白页 */
    margin-top: 0; /* 取消页眉 */
    margin-bottom: 0; /* 取消页脚 */
     margin-left: 0;  margin-right: 0; /* 取消默认左右页边距 */
  }
}
</style>