lanju-front/src/views/plan/workorder/printID.vue

<template>
	<div class="app-container">
		<!-- 打印预览弹出层 -->
		<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
      <div>
        <el-input v-model="idCardsNum" placeholder="请输入板次数量" style="width:100px"/>
        <el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
      </div>
			<div id="printFrom" class="my-print-box">
       <div v-for="(item, index) in printData.idCardList" :key="index">
          <el-form>
            <!-- 表头-工单信息 -->
            <el-row>
              <el-col :span="7">
                <img src="@/assets/logo/lanjv.png" class="report-logo" />
              </el-col>
              <el-col :span="10" class="center-text">
                <span>产品标识卡</span>
              </el-col>
              
            </el-row>
            <el-row class="my-print-head">
              <el-col><el-divider/></el-col>
            </el-row>

            <el-row class="my-print-foot">
              <el-col :offset="1" :span="10">
                <div>产品名称:{{ printData.factory }}</div><br/>
                <div>批次号:{{ printData.factory }}</div><br/>
                <div>生产日期:{{ printData.factory }}</div><br/>
                <div>板次:{{ printData.factory }}</div><br/>
                <div>数量:{{ printData.factory }}</div>
              </el-col>
              <el-col :offset="1" :span="10"> 
                <canvas ref="qrCanvas"></canvas>
              </el-col>
            </el-row>
          </el-form>
        </div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
  getIdCardList,
} from '@/api/plan/workorder';
import QRCode from 'qrcode';

export default {
  name: "printID",
  components: {
  },
  data() {
    return {
      idCardsNum: 1,
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectRow: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      printDialogVisible: false,
      // 打印
      printData: {
        printable: "printFrom",
        ignore: ["no-print"],
        workCenter: "暂无数据",
        factory: null,
        idCardList: []
      },
      workorderCode: '',
      //工单重新渲染表格
      refreshWorkerTable: true,
      // 表单校验
      rules: {
       
      },
      tableIndex: "tableIndex",
    };
  },
  created() {
  },
  methods: {
      init(workorderCode){
        this.workorderCode = workorderCode;
      },

    // 打印预览-浏览器打印
    handlePrint(params) {
      printJS({
        printable: params.printable, // 'printFrom', // 标签元素id
        type: params.type || "html",
        maxWidth: 1500, // 最大宽度
        font_size: "", // 设置字体大小
        header: params.header, // '表单',
        targetStyles: ["*"],
        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: params.ignore || [], // ['no-print']
        properties: params.properties || null,
      });
    },
    // 打印预览-点击打印预览按钮
    showPrint() {
      // 清楚缓存
      //this.printData.workCenter = "暂无数据";
      getIdCardList(this.workorderCode,this.idCardNum).then((response) => {
        debugger
        //this.reset();
        this.printData.idCardList = response.idCards;
        // 使用 Vue 的 nextTick 来确保 DOM 已经更新
        this.$nextTick(() => {

          //for(var i=0;0<response.idCards.length;i++){
            let qrCanvasIndex = "qrCanvas"+0;
            const canvas = this.$refs.qrCanvas;
            const options = {
              width: 350,  // 设定二维码的宽度
              height: 350  // 设定二维码的高度
            };
            QRCode.toCanvas(canvas,response.idCards[0], options, error => {
              if (error) console.error(error);
            });
          //}
        });
      });
    }
  },
};
</script>
<style scoped>
.print-btn {
  margin-bottom: 15px;
  margin-left: 10px;
}

.center-text {
  text-align: left;
  font-size: 63px;
  font-weight: 800;
}

.report-logo {
  margin-top: 15px;
  margin-left: 15px;
  height: 70px;
}

.button-container {
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
}

.my-print-table {
  font-size: 20px;
}

.my-print-foot {
  font-size: 17px;
}
.my-print-foot2 {
  font-size: 19px;
}

.my-print-box{
  width:100%
}
</style>