一、生成条形码：

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', // 绑定打印区域的idbeforeOpenCallback(vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback(vue) {vue.printLoading = falseconsole.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', // 绑定打印区域的idbeforeOpenCallback(vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback(vue) {vue.printLoading = falseconsole.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>

转载请著名转载地址https://blog.csdn.net/ABC123220/article/details/131080624