vue2 条形码 打印3*5的标签,打印标签

效果图

1:npm install jsbarcode

npm install vue-print-nb

2:main.js 引入

import Print from 'vue-print-nb'

Vue.use(Print)

3:

<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      width="640px"
      title="打印"
      @closed="closeIng"
    >
      <!-- 打印内容 -->
      <div ref="printContent" id= "printContent" class="printContent">
       
          <svg id="barcodeContainer1" ref="barcodeContainer1" style="display: block;"></svg>
<!-- <svg id="barcodeContainer2" ref="barcodeContainer2" style="display: block;"></svg>
          <svg id="barcodeContainer3" ref="barcodeContainer3" style="display: block;"></svg>
          <svg id="barcodeContainer4" ref="barcodeContainer4" style="display: block;"></svg>
          <svg id="barcodeContainer5" ref="barcodeContainer5" style="display: block;"></svg>
          <svg id="barcodeContainer6" ref="barcodeContainer6" style="display: block;"></svg>
          <svg id="barcodeContainer7" ref="barcodeContainer7" style="display: block;"></svg>
          <svg id="barcodeContainer8" ref="barcodeContainer8" style="display: block;"></svg>
          <svg id="barcodeContainer9" ref="barcodeContainer9" style="display: block;"></svg> -->
          <!-- <img ref="barcodeContainer1" id="barcodeContainer1" style="display: block;"/> -->
         
      </div>
      
      <div slot="footer" >
        <el-button v-print="print"  type="primary" size="small" 
          >打印</el-button
        >
        <el-button @click="visible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
export default {
  components: { },
  data() {
    return {
      visible: false,

//有些不需要的可以去掉
      print: {
        id: "printContent",
        popTitle: "", // 打印配置页上方标题
        extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
        previewTitle: "", // 打印预览的标题(开启预览模式后出现),
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
        zIndex: "", // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
        previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {
        }, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
        url: "",
        standard: "",
        extraCss: "",
      },
    };
  },
mounted(){
this.init();
},
  methods: {
    
    init() {
               const paperWidth = 76.2; // 3 inches in mm
                const paperHeight = 127; // 5 inches in mm
                const barcodeOptions = {
                format: 'CODE128',
                width:  2, // 根据纸张宽度调整条形码宽度
                height: 200, // 根据纸张高度调整条形码高度
                displayValue: true,
              };
              const barcodeContainer = document.getElementById("barcodeContainer1");
              barcodeContainer.style.width = `${paperWidth * 1.1}mm`;  // 90% of paper width
              barcodeContainer.style.height = `${paperHeight * 1}mm`;  // 70% of paper height
              JsBarcode("#barcodeContainer1", "121242457", barcodeOptions);
             // JsBarcode("#barcodeContainer2", "121242456", barcodeOptions);
              // JsBarcode("#barcodeContainer3", "121242455", barcodeOptions);
              // JsBarcode("#barcodeContainer4", "121242454", barcodeOptions);
              // JsBarcode("#barcodeContainer5", "121242453", barcodeOptions);
              // JsBarcode("#barcodeContainer6", "121242452", barcodeOptions);
              // JsBarcode("#barcodeContainer7", "121242451", barcodeOptions);
              // JsBarcode("#barcodeContainer8", "121242450", barcodeOptions);
              // JsBarcode("#barcodeContainer9", "121242458", barcodeOptions);
            
       
    },
  },
};
</script>

<style scoped>

@media print {
  @page {
    size: 3in 5in;
    margin: 0;
  }
  #barcodeContainer1 {
    display: block;
    margin: auto;
    max-width: 110%;
    max-height: 100%;
  }
 .printContent{
   width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.25in;
    box-sizing: border-box;
    margin-top: 170px;
 } 
 

  svg {
    max-width: 110%;
    max-height: 100%;
  }

}
</style>

注意:主要是在这个margin-top的属性,不加的话打印出来就是空白的。

想要验证的话可以把注释的打开,多建立几个就知道当前打印的位置了,

.printContent{

margin-top: 170px;

}

相关推荐
懒大王爱吃狼30 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript