1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 前端实现 生成条形码并调用打印机打印

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

时间:2023-01-07 05:07:50

相关推荐

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

本文档使用开发语言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', // 绑定打印区域的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>

转载请著名转载地址/ABC123220/article/details/131080624

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。