vue3实现浏览器打印（条形码、二维码） - wpsshop博客
devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-07-16 07:17:27

赞

踩

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安装：

  1. npm install print-js --save
  2. import printJS from 'print-js';

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

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

printJS('printFrom');

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

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

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

  1. 安装jsbarcode
  1. npm install jsbarcode --save
  2. import JsBarcode from "jsbarcode";

 2. 使用

  1. <template>
  2.     <div v-for="(item, index) in newData" :key="item.id">
  3.         <img :id="'jsbarcodeImg' + index" style="width: 220px;" />
  4.     </div>
  5. </template>
  6. <script>
  7. import JsBarcode from "jsbarcode";
  8. export defaul {
  9.     data(){
  10.      return {
  11.          newData:[
  12.              {id:1, num: 12345678},
  13.              {id:2, num: 876543},         
  14.          ]     
  15.      }       
  16.     },
  17.     methods:{
  18.         getBarcode() {
  19.           this.newData.forEach((v, index) => {
  20.             JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
  21.               format: "CODE39", // 条形码格式
  22.               width: 2, // 条形码条的宽度
  23.               height: 80, // 条形码高度
  24.               marginRight:30,
  25.               fontSize: 30,
  26.               // displayValue: false,  // 是否显示条形码下方的数字， 默认true
  27.             });
  28.           });    
  29.     }
  30. }
  31. </script>

完整代码如下：

  1. <template>
  2.   <div id="print-template" class="print-hide">
  3.     <div v-for="(item, index) in newData" :key="item.id">
  4.       <div style="width:20px;height: 30px;"></div>
  5.       <div>
  6.         <div style="display: inline-block">品名：{{ item?.name }}</div>
  7.         <div style="display: inline-block">RFID：{{ item?.name }}</div>
  8.       </div>
  9.       <div>
  10.         <img :id="'jsbarcodeImg' + index" style="width: 220px;" />
  11.         <qrcode-vue
  12.           :value="item?.num?.toString()"
  13.           :size="120"
  14.           :margin="5"
  15.         />
  16.       </div>
  17.     </div>
  18.   </div>
  19. </template>
  20. <script>
  21. import printJS from "print-js";
  22. import QrcodeVue from "qrcode.vue";
  23. import JsBarcode from "jsbarcode";
  24.  
  25. export default {
  26.   components: {
  27.     QrcodeVue,
  28.   },
  29.   data() {
  30.     return {
  31.       newData: [
  32.          {id:1, name:"乙醇", num: 12345678},
  33.          {id:2, name:"葡萄糖", num: 876543},         
  34.       ],
  35.     };
  36.   },
  37.   mounted() {
  38.     this.getBarcode();
  39.     setTimeout(() => {
  40.       this.handlePrint();
  41.     }, 500);
  42.     // this.changeImg();
  43.   },
  44.   beforeUnmount(){
  45.     clearTimeout()
  46.   },
  47.   methods: {
  48.     handlePrint() {
  49.       // 获取打印模板的DOM元素
  50.       const printElement = document.getElementById("print-template");
  51.       console.log(printElement);
  52.       if (printElement) {
  53.         // 显示打印模板，以便能够打印
  54.         printElement.classList.remove("print-hide");
  55.         // 使用vue-printjs打印模板内容
  56.         printJS({
  57.           printable: printElement,
  58.           type: "html",
  59.           error: (err) => {
  60.             console.log("err", err);
  61.           },
  62.         });
  63.         // 打印完成后隐藏打印模板
  64.         printElement.classList.add("print-hide");
  65.       }
  66.     },
  67.     getBarcode() {
  68.       this.newData.forEach((v, index) => {
  69.         JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
  70.           format: "CODE39",
  71.           width: 2,
  72.           height: 80,
  73.           marginRight:30,
  74.           fontSize: 30,
  75.           // displayValue: false,
  76.         });
  77.       });
  78.     },
  79.   },
  80. };
  81. </script>
  82. <style lang="scss">
  83. .print-hide {
  84.   display: none; /* 在屏幕上隐藏打印模板 */
  85. }
  86. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/832883
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号

        
cppcmd=keepalive&