vue 使用jquery.PrintArea.js打印指定区域

本文链接：https://blog.csdn.net/quqiangnihao/article/details/102823606

首先下载jquery.PrintArea.js

下载地址：https://plugins.jquery.com/PrintArea/

页面引入 import { printArea } from …/…/common/js/jquery.PrintArea.js";

将 jquery.PrintArea.js 中的printArea导出：export { printArea} //很关键

点击按钮打印

<el-button size="small" type="primary" @click="printpage">打印</el-button>

在页面中调用

printpage() {
      $("#myPrintArea").printArea();
    }

将页面要打印的区域用div包起来

<div id="myPrintArea">
        <el-row>
          <el-col :span="24">
            <table style="border: 1px solid #ebeef5;" rules="all" width="100%">
              <tr>
                <!-- 收款日期 -->
                <td width="20%" style="text-align:right;padding-right: 5px;font-size: 12px;height: 24px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S3')}}</td>
                <td width="30%" style="text-align: left;padding-left: 5px;padding-right: 5px;font-size: 12px;color: #606266;border: 1px solid #ebeef5;">{{numberValidateForm.receivedDate|dateformat}}</td>
                <!-- 客户姓名 -->
                <td width="20%" style="text-align:right;padding-right: 5px;font-size: 12px;height: 24px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM301.S02')}}</td>
                <td width="30%" style="text-align: left;padding-left: 5px;padding-right: 5px;font-size: 12px;color: #606266;border: 1px solid #ebeef5;">{{numberValidateForm.customerName}}</td>
              </tr>
              <tr>
                <!-- 收款方式 -->
                <td width="20%" style="text-align:right;padding-right: 5px;font-size: 12px;height: 24px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S6')}}</td>
                <td width="30%" style="text-align: left;padding-left: 5px;padding-right: 5px;font-size: 12px;color: #606266;border: 1px solid #ebeef5;">{{numberValidateForm.receivedTypeName}}</td>
                <!-- 收款总额 -->
                <td width="20%" style="text-align:right;padding-right: 5px;font-size: 12px;height: 24px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S7')}}</td>
                <td width="30%" style="text-align: left;padding-left: 5px;padding-right: 5px;font-size: 12px;color: #606266;border: 1px solid #ebeef5;">{{numberValidateForm.receivedPrice|numformat}}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px;">
          <el-col>
            <table style="border: 1px solid #ebeef5;" rules="all" width="100%">
              <thead style="background-color: #1e9aa3;color: #ffffff;border: 1px solid #ebeef5;">
                <tr>
                  <!-- 机型 -->
                  <td style="width:17%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM303.S108')}}</td>
                  <!-- 机号 -->
                  <td style="width:17%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM303.S109')}}</td>
                  <!-- 债权类型 -->
                  <td style="width:16%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM301.S07')}}</td>
                  <!-- 应收期数 -->
                  <td style="width:16%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM401.S6')}}</td>
                  <!-- 应收金额 -->
                  <td style="width:17%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S13')}}</td>
                  <!-- 已收金额 -->
                  <td style="width:17%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S14')}}</td>
                </tr>
              </thead>
              <tbody>
                <tr :class="{ active:index%2!=0? true:''}" v-for="(item,index) in monthstillTableData">
                  <td style="text-align:center;font-size: 12px;">{{item.modelName}}</td>
                  <td style="text-align:center;font-size: 12px;">{{item.modelNo}}</td>
                  <td style="text-align:center;font-size: 12px;">{{item.scmTypeName}}</td>
                  <td style="text-align:center;font-size: 12px;">{{item.receivableNumSum}}</td>
                  <td style="text-align: right;padding-right: 5px;font-size: 12px;">{{item.receivableSum|numformat}}</td>
                  <td style="text-align: right;padding-right: 5px;font-size: 12px;">{{item.receivedSum|numformat}}</td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px; margin-bottom: 5px;">
          <span style="font-size: 14px;font-weight: 600;">{{$t('SCM407.S18')}}</span>
        </el-row>
        <el-row>
          <table style="border: 1px solid #ebeef5;" rules="all" width="100%">
            <thead style="background-color: #1e9aa3;color: #ffffff;border: 1px solid #ebeef5;">
              <tr>
                <!-- 其它款 -->
                <td style="width:25%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S19')}}</td>
                <!-- 金额 -->
                <td style="width:25%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S20')}}</td>
                <!-- 备注 -->
                <td style="width:50%;text-align:center;font-size: 12px;height: 22px;white-space: nowrap;font-weight: 600;border: 1px solid #ebeef5;">{{$t('SCM407.S21')}}</td>
              </tr>
            </thead>
            <tbody>
              <tr :class="{ active:index%2!=0? true:''}" v-for="(item,index) in otherTableData">
                <td style="text-align:center;font-size: 12px;">{{item.othertype}}</td>
                <td style="text-align:center;font-size: 12px;">{{item.Amount|numformat}}</td>
                <td style="text-align:center;font-size: 12px;">{{item.Remark}}</td>
              </tr>
            </tbody>
          </table>
        </el-row>
        <el-row style="margin-top:10px;text-align: center;font-size: 12px;">
          <span>{{$t('SCM411.S12')}}：{{chargeName}}</span>&nbsp;&nbsp;&nbsp;
          <span>{{$t('SCM411.S13')}}：{{printTime}}</span>
        </el-row>
      </div>
      <el-row style="margin-top:20px;text-align: center;">
        <el-col :span="24">
          <el-button size="small" type="primary" @click="printpage">打印</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>

亲测有用。