vue使用插件jsbarcode 生成条码下载

jsbarcode生成条码下载
1、第一步：html中 设 id=“barcode_container” 和 **id=“barcode_edit”**比较重要

			<!-- 展示条形码，和下载按钮-->
 			<el-form-item v-if="workerForm.id" label="条形码">
 			   <!--id="barcode_container"这个id是下载条形码-->
              <div id="barcode_container"> 
               <!--id="barcode_edit"这个id是展示条形码-->
                <img id="barcode_edit" style="width: 280px" />
              </div>
              <span
                style="color: #409eff; cursor: pointer"
                @click="downloadSingleBarcode(workerForm)">
                条形码下载
              </span>
            </el-form-item>

2、第二步：点击第一步的条形码下载时，展示打印预览界面

  <!-- html转pdf -->
    <print-view ref="PrintView" /> <!--封装了一个组件print-view，下面贴出print-view代码-->
    <!-- pdfhtml -->
    <el-dialog
      class="print_info_dialog"
      :title="$t('打印的名字')"
      :visible.sync="printInfoDialogShow"
      width="820px"
      :close-on-click-modal="false"
    >
      <div id="print_info">
        <div class="page_list" style="width: 768px">
          <div
            class="page"
            style="
              width: 768px;
              height: 900px;
              box-sizing: border-box;
              page-break-after: always;
            "
            v-for="(item, index) in selectedWorker"
            :key="index"
          >
            <div
              v-for="inneItem in item"
              :key="inneItem.id"
              class="item"
              style="
                margin: 8px 10px;
                padding-top: 8px;
                width: calc(33% - 18px);
                height: 114px;
                float: left;
                border: 1px solid black;
              "
            >
              <div
                class="name"
                style="
                  font-size: 14px;
                  font-weight: 600;
                  width: 100%;
                  padding: 0 10px;
                  height: 18px;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ inneItem.workerName }}
              </div>
              <img
                :src="inneItem.codeSrc"
                alt=""
                style="display: inline-block; width: 100%"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
      <!--打印按钮-->
        <el-button type="primary" @click="handlePrint">
          {{ $t("打印") }}
        </el-button>
      </div>
    </el-dialog>

子组件print-view代码

<template>
  <div class="print">
    <iframe id="iframe" style="display: none;"></iframe>
  </div>
</template>
<script>
import { styleOnload } from '@/utils';
export default {
  name: 'PrintView',
  props: {},
  watch: {},
  methods: {
    setBodyHtml(html) {
      const document = window.document;
      const iframe = window.frames[0];
      iframe.document.head.innerHTML = document.head.innerHTML; // 获取当前文档的头部给iframe
      iframe.document.body.innerHTML = html; // 把传过来的html给iframe头部

      // 图片和样式加载完成
      Promise.all([this.loadStyle()]).then(res => {
      
        //   打印
        iframe.window.print();
      });
    },

    loadImage() {
      const iframe = window.frames[0];
      const imgs = iframe.document.body.getElementsByTagName('img'); // <img>
      return new Promise((resolve, reject) => {
        for (let i = 0; i < imgs.length; i++) {
          console.log('图片');
          imgs[i].onload = function() {
            if (i === imgs.length - 1) {
             resolve('img 加载完成');
            }
          };
        }
      });
    },
  },
};
</script>

  // 编辑按钮点击事件
    handleEdit(row) {
      this.resetWorkerForm();
      getWorker(row.id).then(res => {
        const { workerCode } = res.data  //从接口返回的es.data中解构赋值出workerCode 
        // 生成条形码
        this.$nextTick(() => {
          JsBarcode(`#barcode_edit`, workerCode, {
            format: "CODE39", //选择要使用的条形码类型
            fontSize: 26,//设置文本的大小
            fontOptions: "bold" //使文字加粗体
          });
        });
      });
    },

 // 单个条形码下载
    downloadSingleBarcode() {
      // downLoadPDF(batchDownloadBarcode(), [id]);
      const { workerName, workerGender } = this.workerForm;
      const el = document.getElementById("barcode_container");
      const outEl = document.createElement("div");
      const innerEl = document.createElement("div");
      innerEl.innerHTML =
        `<div style="width: 280px;display:flex; justify-content: space-around;line-height: 20px;">
                  <span>${workerName}</span>
                  <span>${this.gender(workerGender) || ""}</span>
                </div>` + el.innerHTML;
      innerEl.setAttribute(
        "style",
        "margin-top: 100px; display:flex; flex-direction: column; align-items: center; justify-content: center;"
      );
      outEl.appendChild(innerEl);
       //打印预览如图1，直接点打印，填写保存的名字就会保存成功
      this.$refs.PrintView.setBodyHtml(outEl.innerHTML);
    },

//点击打印  展示html的文件下载文件
 handlePrint() {
      this.printInfoDialogShow = true;
      const html = document.getElementById("print_info").innerHTML;
      this.$refs.PrintView.setBodyHtml(html);
    },