使用HiPrint批量打印条码，二维码

简介

hiprint是一款开源vue打印插件，开箱即用，非常方便。
官方文档:
hiprint官方文档

Vue集成

// 控制台中输入 以安装npm包

npm install vue-plugin-hiprint 

// 在index.html 文件中添加打印所需样式: 当然你也可以调整成 相对链接/自有链接
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
// main.js中 引入安装

import { 
   hiPrintPlugin} from 'vue-plugin-hiprint' Vue.use(hiPrintPlugin, '$pluginName') hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端 

页面使用-单页面打印

//初始化模板 this.$pluginName.init(); var hiprintTemplate = new this.$pluginName.PrintTemplate(); //添加页面打印模板 var panel = hiprintTemplate.addPrintPanel({ 
    width: 100, height: 130, paperFooter: 340, paperHeader: 10 }); //文本 panel.addPrintText({ 
    options: { 
    width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } }); //条形码 panel.addPrintText({ 
    options: { 
    width: 140, height: 35, top: 40, left: 20, title: '', textType: 'barcode' } }); //二维码 panel.addPrintText({ 
    options: { 
    width: 35, height: 35, top: 40, left: 165, title: '', textType: 'qrcode' } }); //长文本 panel.addPrintLongText({ 
    options: { 
    width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } }); //表格 panel.addPrintTable({ 
    options: { 
    width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } }); //Html panel.addPrintHtml({ 
    options: { 
    width: 140, height: 35, top: 180, left: 20, content:'' } }); //竖线//不设置宽度 panel.addPrintVline({ 
    options: { 
    height: 35, top: 230, left: 20 } }); //横线 //不设置高度 panel.addPrintHline({ 
    options: { 
    width: 140, top: 245, left: 120 } }); //矩形 panel.addPrintRect({ 
    options: { 
    width: 35, height: 35, top: 230, left: 60 } }); //调用其中一种 //打印 hiprintTemplate.print({ 
   }); //直接打印，需要安装客户端 hiprintTemplate.print2({ 
   }); 

页面使用-批量打印

//提前定义好打印模板 barcodeData，count字段为自定义数据字段，需传入动态数据 panel.js export default { 
    "panels": [ { 
    "index": 0, "height": 60, "width": 80, "paperHeader": -15, "paperFooter": 170.033, "printElements": [{ 
    "options": { 
    "left": 28.5, "top": 12, "height": 17, "width": 120, "testData": "单据表头", "fontSize": 16.5, "fontWeight": "700", "textAlign": "center", "hideTitle": true, "title": "单据表头1" }, "printElementType": { 
   "title": "单据表头", "type": "text"} }, { 
    "options": { 
    "left": 28.5, "top": 34.5, "height": 32, "width": 120, "testData": "XS", "fontSize": 12, "lineHeight": 18, "fontWeight": "700", "textAlign": "left", "textContentVerticalAlign": "middle", "textType": "barcode", "field":"barcodeData", "title": "二维码" }, "printElementType": { 
   "title": "二维码", "type": "text"} }, { 
    "options": { 
    "left": 157.5, "top": 15, "height": 9.75, "width": 57, "title": "第", "field": "count", "testData": "1" }, "printElementType": { 
   "title": "文本", "type": "text"} }], "paperNumberLeft": 196, "paperNumberTop": 148, "paperNumberDisabled": true }] } 

//在data定义打印field字段数据 printData:[ { 
   barcodeData:'aa',count:'1'},{ 
   barcodeData:'bb',count:'2'},{ 
   barcodeData:'cc',count:'3'} ] 

//批量打印使用 //带入模板初始化 this.$pluginName.init(); let hiprintTemplate = new this.$pluginName.PrintTemplate({ 
    template:panel }); //传入数据打印 hiprintTemplate.print(this.printData,{ 
   }) 

总结

hiprint是一款很方便的打印插件，可以提前到官网上面设置好打印布局，然后生成模板，另存到一个文件中，方便使用。
使用中遇到问题：打印时，样式重叠，内容总打印在第一页上，原因：当前页面没有引入print-lock.css样式，可见官网说明。
index.html引用外部css需将css文件放在与src同级目录下static文件夹中。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/578.html