JsBarcode简单生成条形码，打印表格

最新推荐文章于 2024-04-28 18:34:43 发布

行走的API

最新推荐文章于 2024-04-28 18:34:43 发布

阅读量479

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58949582/article/details/135010197

版权

1、下载、使用

// 下载
npm install jsbarcode --save


// 在需要使用的文件处引入
import JsBarcode from 'jsbarcode';

2、生成、打印

<template>
  <div>
    <canvas ref="barcodeCanvas" style="display: none;"></canvas>
  </div>
</template>
<script>
import JsBarcode from 'jsbarcode';
export default {
    data() {
      return {}
    },
    methods: {
      // 打印函数
      print(val) {
         let newArray = {
          '物品名称': val.name || '-',
          '规格/型号': val.specification || '-',
          '主单位': val.mainUnit
        }
         // val 为需要转化成条形码的数据
         this.$nextTick(() => {
            // 生成条形码
            JsBarcode(this.$refs.barcodeCanvas , val.id , {
               format: 'CODE128',
               displayValue: true,
               height: 60,
               font: "STSong-Light, STHeiti, FangSong_GB2312"
            })
            // 创建打印窗口
            const printWindow = window.open('', '_blank');
            const barcodeImage = new Image();
            barcodeImage.src = this.$refs.barcodeCanvas.toDataURL();
            barcodeImage.onload = () => {
               let _html = `<html><head><title>头部</title><style>
                    body {
                      text-align: center;
                    }
                    table {
                      margin: 0 auto;
                      text-align: left;
                      border-collapse: collapse;
                      width: 80%;
                    }
                    th, td {
                      padding: 8px;
                      border: 1px solid black;
                    }
                    img {
                      display: block;
                      max-width: 100%;
                      height: auto;
                      margin: 0 auto;
                    }
                    .trCenter {
                      text-align: center !important;
                    }
                  </style>
                </head><body>
                  <div>
                    <table border="1px solid #ccc" cellspacing="0" cellpadding="0" style="width: 600px;">
                    <tbody>
                      ${Array.from(Object.entries(newArray), ([key, value]) => {
                        return `<tr><td>${key}</td><td>${value}</td> </tr>`
                      }).join('')}
                      <tr class="trCenter">
                        <td colspan="${Object.keys(newArray).length}">
                          <img src="${barcodeImage.src}" alt="图片">
                        </td>
                      </tr>
                    </tbody>
                    </table>
                  </div>
                </body>
              </html>`

              printWindow.document.write(_html)
              printWindow.document.close();
              printWindow.print();
            }
         })
      }
    }
  }
</script>