vue3条码打印

最新推荐文章于 2024-05-30 16:57:19 发布

是小马呀

最新推荐文章于 2024-05-30 16:57:19 发布

阅读量1.2k

点赞数

分类专栏： vue3 文章标签：前端

本文链接：https://blog.csdn.net/weixin_56694018/article/details/130870451

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue3条码打印

首先说明一下，因为我这里使用的是iframe打印，所以需要参照我的这种格式来修改打印的样式

当然我也使用了printJS的打印，如果有需要也可以参考，内容放在最下面，printjs打印我是打印的类似于账单，使用的是三联式的打印机，

说明：这里需要说明一下，我这里的都是没有通过人工手动去调整的比例以及边距，考虑到用户可能不止打印我们这一个条码或者单据，如果修改了默认的打印样式或导致其他条件下也会生效，或造成非常不好的体验这些都可以通过@media 设置打印的样式，可以通过size属性来设置纸张大小以及区域大小，具体根据开发的情况自己调试，调试比较费时间，所以可以直接拿我这个去调试

1.方法一ifarme

步骤：

封装公共条码组件

BarcodePrint > index.vue

<template>
  <div>
    <svg :class="'barcode' + props.value" style="text-align: left;"></svg>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import JsBarcode from 'jsbarcode';

const props = defineProps({
  // 数据
  // 当前的值
  value: String,
  type: String,
});
watch(props, () => {
  console.log(props);
  draw();
});
function draw() {
  JsBarcode('.barcode' + props.value, String(props.value), {
    format: 'CODE128', //选择要使用的条形码类型
    width: 1.2, //设置条之间的宽度
    height: 30, //高度
    displayValue: true, //是否在条形码下方显示文字
    //   text:"456",//覆盖显示的文本
    fontOptions: "bold",//使文字加粗体或变斜体
    // font: "fantasy",//设置文本的字体
    textAlign: "left",//设置文本的水平对齐方式
    // textPosition: "top",//设置文本的垂直位置
    textMargin: 5,//设置条形码和文本之间的间距
    fontSize: 16, //设置文本的大小
    // background: "#eee",//设置条形码的背景
    lineColor: "#000",//设置条和文本的颜色。
    // margin: 0, //设置条形码周围的空白边距
    // marginTop: 20,
    // marginBottom: 0,
  });
}
onMounted(() => {
  nextTick(() => {
    draw();
  });
});
</script>

这里是我需要的内容以及打印样式自己可以参考修改

我的打印内容以及样式组件

<template>
  <div style="width: 100%; height: 100%;  ">
    <iframe style="display: none" ref="iframeRef" :srcdoc="barcodeCon" frameborder="0"></iframe>
    <div id="barcode" style="display: none">
      <div v-for="item in list" :value="item" style="page-break-after:always;">
        <div style="display: flex; justify-content: space-between; margin: 0; font-size: 12px; width: 100%;">
          <div style="text-align: center; width: 100%; font-size: 12px; font-weight: 500;padding: 10px;">医院医用耗材</div>
        </div>
        <div style="width: 100%;">
          <p style="margin: 0; font-weight: 500;width: 100%; text-align: left; font-size: 12px;">材料名称:&nbsp;&nbsp;{{
            item.ItemName
          }}</p>
          <p style="margin: 0; font-weight: 500;width: 100%; text-align: left;font-size: 12px;">规格/型号:&nbsp;&nbsp;{{
            item.ItemStandard
          }}&nbsp;/&nbsp;{{ item.ItemModel }}</p>
          <p style="margin: 0; font-weight: 500;width: 100%; text-align: left;font-size: 12px;">批号/效期:&nbsp;&nbsp;{{
            item.LotID
          }} &nbsp;/&nbsp;{{ item.ExpireDate }}</p>
        </div>
        <barcode-print :key="item + new Date()" :value="item.RFIDValue"> </barcode-print>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, nextTick, watch, } from 'vue';
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: [],
  },
});

const barcodeCon = ref('');
const iframeRef = ref(null);

function print() {
  //赋值
  if (!iframeRef.value) {
    console.error("iframeRef is not set or invalid.");
    return;
  }
  barcodeCon.value = document.getElementById('barcode').innerHTML;
  // 获取 iframe 内部的文档对象
  const iframeDoc = iframeRef.value.contentDocument || iframeRef.value.contentWindow.document;

  // 创建并设置样式
  const style = iframeDoc.createElement('style');
  style.innerHTML = `
  @media print {
      /* 重置打印样式 */
      * {
        margin: 0 !important;
        padding: 0 0 0 1px!important;
        box-sizing: border-box !important;
      }
      /* 添加自定义打印样式 */
      @page {
        size: auto;
        margin: 0 !important;
      }
    }
  `;
  // 将样式添加到 iframe 内部的文档中的 <head> 元素中
  iframeDoc.head.appendChild(style);
  console.log(iframeRef.value, 'iframeRef.value');
  // setTimeout(function () {
  // 将内容插入到 iframe 中
  iframeDoc.body.innerHTML = barcodeCon.value;
  iframeRef.value.contentWindow.print();
  // }, 100);
}
defineExpose({
  print,
});
</script>
<style scoped lang="scss"></style>

2.printjs打印

这里我没有去封装,可以来参考

Print.vue

<template> 
    <div id="print" style="border: 1px solid #eee;width: 100%;">
         <h1 style="text-align: center;margin-top: 20px; font-size: 20px; font-weight: 600;width: 100%;">
             医院中心库出库单</h1>
         <div class="warpper">
             <div class="left item">
                 <p>出库单号：T23211111111111</p>
                 <p>请领科室：手术科21312</p>
             </div>
             <div class="center item">
                 <p>请领单号：TS41565464616</p>
                 <p>请领人：张三</p>
             </div>
             <div class="right item">
                 <p>出库时间：2023-11-09</p>
             </div>
             <div class="item imgContainer" style="padding-left: 50px;">
                 <div id="imgContainer" style="text-align: center;"></div>
             </div>
         </div>
         <p class="adress">
             收货地址：上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市上哈市			上哈市上哈市12312
         </p>
         <BasicTable :scroll="{ y: 20000, x: 1500 }" :show-index-column="false" :columns="columns" :dataSource="data"
                     :ellipsis="false" :bordered="true" :pagination="false">
         </BasicTable>
         <div class="footer page-break">
             <p>配送人员：</p>
             <p>出库审核：</p>
             <p>科室收货人：</p>
         </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import QRCode from 'qrcodejs2-fix';
	import printJS from 'print-js';
    // 打印样式
	let style = `
      @page { size: auto; } 
      @media print {
      * {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
      }
      /* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */
      @page :first {
        margin-top: 1cm; 
      }
      body {
        margin: 0 !important;
      }
      @page {
        // size:9.5in 14in;
        size: A4 portrait;
      }
      body{
        margin:0;
      }
      thead {
        width: 100%;
        margin:0;
        display: table-header-group;
      }
      th, td {
        fost-size:20px;
        border: 1px solid #000;
        padding: 0 !important; /* 设置单元格的内边距为 0，去除间距 */
        }
      th{
        white-space: nowrap;
      }
      td{
        word-wrap:break-word;
        text-align: center;
        vertical-align: middle;
      }
      table {
        width: 100%;
        border-collapse:collapse;
        table-layout: fixed;
        margin: 0;
        padding: 0;
      }
      .page-break {
        margin-top:40px ! important;
        // padding-left:40px !important;
        // font-size: 36px;
        // page-break-after: always;
      }
      h1{
        padding-left:400px !important;
        font-size: 36px !important;
        font-weight: 600;
      }
      .adress{
        font-size: 19px;
      }
      .warpper {
        width: 100%;
        display: flex !important;
        justify-content: space-evenly;
        font-size: 19px;
      }
      .warpper .item{
        width: 25%;
        // margin: 10px 0 !important;
        display: flex;
        flex-direction: column;
      }
      #print{
        page-break-inside: avoid;
      }
      #imgContainer {
        width: 120px;
        height: 120px;
      }
      .imgContainer{
        padding-left:50px !important;
      }
    }`
    const handleOk = async () => {
      printJS({
        printable: 'print', // 'printFrom', // 标签元素id
        type: 'html',
        maxWidth: window.innerWidth,
        scanStyles: true,
        style
      })
}
    const generateCode = () => {
        // document.getElementById("imgContainer").innerHTML = ""; //1
        new QRCode(document.getElementById("imgContainer"), {
            text: 'https://www.baidu.com'
        });
    };
    generateCode()
</script>

true,
style
})
}
const generateCode = () => {
// document.getElementById(“imgContainer”).innerHTML = “”; //1
new QRCode(document.getElementById(“imgContainer”), {
text: ‘https://www.baidu.com’
});
};
generateCode()