vue html页面打印功能vue-print-nb

准考证打印

 <el-button v-if="scope.row.examState==1"
                     type="text"
                     @click="examPrint(scope.row.arrangeId)"
          >准考证打印
          </el-button>

examPrint方法

// 准考证打印

 examPrint(arrangeId) {
    let params = {
      arrangeId: arrangeId
    }
    printAdmission(params).then( res => {
      this.multipleArr = res.data;
    })
    this.cardDialogVisible = true;
  },

打印内容

<!-- 打印 -->
    <el-dialog
      width="1047px"
      :close-on-click-modal="false"
      :visible.sync="cardDialogVisible"
      title="准考证"
      class="printDialog"
    >
      <div id="card">
        <div id="cardWrap" class="cardWrap">
          <div class="cardContain" v-for="(item, index) in multipleArr" :key="index">
            <h3 style="text-align: center;">准考证</h3>
            <table id="ptb" class="pttb" width="660" align="center">
              <tbody>
                <tr>
                  <td style="width: 75px; height: 38px;" align="center">准考证号</td>
                  <td style="width: 115px;">
                    <span id="Span1">{{item.admission}}</span>
                  </td>
                  <td style="width: 75px;" align="center">考试时间</td>
                  <td style="width: 115px;">
                    <span id="Span2">{{item.examDate}}</span>
                  </td>
                  <td rowspan="4" style="width: 120px" align="center">
                    <img style="width: 100%;height: 152px;" :src="baseUrl + item.photo" alt="照片">
                  </td>
                </tr>
                <tr>
                  <td style="height: 38px;" align="center">姓名</td>
                  <td>
                    <span id="Span3">{{item.name}}</span>
                  </td>
                  <td style="height: 38px;" align="center">补考截止时间</td>
                  <td>
                    <span id="Span3">{{item.examMakeDate}}</span>
                  </td>

                </tr>

                <tr>
                  <td style="height: 38px;" align="center">性别</td>
                  <td>
                    <span id="lbl_Nowzy">{{item.sex == '1' ? '男' : '女'}}</span>
                  </td>
                  <td style="width: 75px;" align="center">资格类型</td>
                  <td style="width: 45px;">
                    <span id="Span2">{{item.kindName}}</span>
                  </td>
                </tr>
                <tr>
                  <td style="height: 38px;" align="center">考试机构</td>
                  <td>
                    <span id="lbl_zhuanye2">巴彦淖尔市应急管理局</span>
                  </td>
                  <td style="height: 38px;" align="center">考试科目</td>
                  <td>
                    <span id="lbl_zhuanye2">{{item.className}}</span>
                  </td>
                </tr>
                <tr>
                  <td style="height: 38px;" align="center">考试地点</td>
                  <td>
                    <span id="lbl_Comnane">{{item.examAddress}}</span>
                  </td>

                  <td align="center">培训机构</td>
                  <td colspan="2">
                    <span id="lbl_year">巴彦淖尔职业技术学校安全生产培训部</span>
                  </td>
                </tr>
                <tr>
                  <td style="height: 38px;" align="center">身份证件类型</td>
                  <td>
                    <span>身份证</span>
                  </td>
                  <td align="center">身份证件号</td>
                  <td colspan="2">
                    <span id="lbl_tel">{{item.cardNo}}</span>
                  </td>
                </tr>
                <tr>
                  <td rowspan="5" colspan="5">
                    <p>考生注意事项：</p>
                    <p>1.&nbsp;&nbsp;携带本人有效身份证件及准考证提前30分钟进入考场，迟到15分钟不得入场。</p>
                    <p>2.&nbsp;&nbsp;遵守考场纪律，凡作弊者取消考试资格，考试完毕点击“交卷”按钮确认后立即离场。</p>
                    <p>3.&nbsp;&nbsp;妥善保管准考证，凭准考证领取资格证书。</p>
                    <p>4.&nbsp;&nbsp;补考考生请注意：逾期未进行考试的视为弃考。</p>
                  </td>
                </tr>
              </tbody>
            </table>
           </div>
        </div>
      </div>
      <el-row class="dialog__footer dialog-footer-btn">
        <el-col>
          <el-button type="primary" v-print="'#cardWrap'">打印</el-button>
          <!-- <el-button @click="closeDialog()">关闭</el-button> -->
        </el-col>
      </el-row>
    </el-dialog>

更详细请参考：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html