vue3实现浏览器打印（条形码、二维码）

在vue3项目中实现浏览器打印功能，可以直接使用javascript方法window.print()。如果你需要更高级的打印功能，比如打印预览、自定义打印模板等，你可能需要集成第三方库或API，以print-js为例。

效果如下：

1. 引入PrintJS库有两种方式， 在线CDN和npm安装依赖

1.1 CDN引入：

<script src="https://printjs-4de6.kxcdn/print.min.js"></script>

 1.2 npm安装：

npm install print-js --save
import printJS from 'print-js';

2. 在引入 PrintJS 库后，你可以使用 printJS() 方法来触发打印。这个方法接受两个参数：第一个参数是要打印的 HTML 元素的 ID，第二个参数是一个选项对象，用于自定义打印设置。

例如，假设你有一个 ID 为 "printFrom" 的 div，你可以这样打印它：

printJS('printFrom');

你还可以自定义打印设置。例如，以下代码将 "printFrom" div 打印成 PDF 文件，并在 PDF 文件的头部和底部添加自定义文本：

printJS({  
  printable: 'printFrom',   // 要打印的最外层元素的id
  type: 'pdf',   // 打印类型，默认pdf, 还有html,image和json
  header: 'My Header',  
  footer: 'My Footer',  
  documentTitle: 'My Document'  
});

如果需要打印条形码， 可以使用vue3-barcode插件，但是这个插件不支持同时打印多个，最后一个总会覆盖前面的，如果只是单独打印一个条形码是完全可行性的， 如果需要循环、批量打印的话，建议使用js插件jsBarcode

1. 安装jsbarcode

npm install jsbarcode --save
import JsBarcode from "jsbarcode";

 2. 使用

<template>
    <div v-for="(item, index) in newData" :key="item.id">
        <img :id="'jsbarcodeImg' + index" style="width: 220px;" />
    </div>
</template>
<script>
import JsBarcode from "jsbarcode";
export defaul {
    data(){
     return {
         newData:[
             {id:1, num: 12345678},
             {id:2, num: 876543},         
         ]     
     }       
    },
    methods:{
        getBarcode() {
          this.newData.forEach((v, index) => {
            JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
              format: "CODE39", // 条形码格式
              width: 2, // 条形码条的宽度
              height: 80, // 条形码高度
              marginRight:30,
              fontSize: 30,
              // displayValue: false,  // 是否显示条形码下方的数字， 默认true
            });
          });    
    }
}
</script>

完整代码如下：

<template>
  <div id="print-template" class="print-hide">
    <div v-for="(item, index) in newData" :key="item.id">
      <div style="width:20px;height: 30px;"></div>
      <div>
        <div style="display: inline-block">品名：{{ item?.name }}</div>
        <div style="display: inline-block">RFID：{{ item?.name }}</div>
      </div>
      <div>
        <img :id="'jsbarcodeImg' + index" style="width: 220px;" />
        <qrcode-vue
          :value="item?.num?.toString()"
          :size="120"
          :margin="5"
        />
      </div>
    </div>
  </div>
</template>
<script>
import printJS from "print-js";
import QrcodeVue from "qrcode.vue";
import JsBarcode from "jsbarcode";
 
export default {
  components: {
    QrcodeVue,
  },
  data() {
    return {
      newData: [
         {id:1, name:"乙醇", num: 12345678},
         {id:2, name:"葡萄糖", num: 876543},         
      ],
    };
  },
  mounted() {
    this.getBarcode();
    setTimeout(() => {
      this.handlePrint();
    }, 500);
    // this.changeImg();
  },
  beforeUnmount(){
    clearTimeout()
  },
  methods: {
    handlePrint() {
      // 获取打印模板的DOM元素
      const printElement = document.getElementById("print-template");
      console.log(printElement);
      if (printElement) {
        // 显示打印模板，以便能够打印
        printElement.classList.remove("print-hide");
        // 使用vue-printjs打印模板内容
        printJS({
          printable: printElement,
          type: "html",
          error: (err) => {
            console.log("err", err);
          },
        });
        // 打印完成后隐藏打印模板
        printElement.classList.add("print-hide");
      }
    },
    getBarcode() {
      this.newData.forEach((v, index) => {
        JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
          format: "CODE39",
          width: 2,
          height: 80,
          marginRight:30,
          fontSize: 30,
          // displayValue: false,
        });
      });
    },
  },
};
</script>
<style lang="scss">
.print-hide {
  display: none; /* 在屏幕上隐藏打印模板 */
}
</style>