vue项目中打印功能的实现

这篇文章是一个关于前端打印报表功能的实现，前端小白，如有问题多多指教，大佬勿喷！！！！

案例描述：点击打印按钮，调用浏览器打印功能，实现打印报表。
一：以下是前端布局页面

  <!-- 打印报表的弹框内容 -->
      <el-dialog
          title="报表打印"
          :visible.sync="dialogVisible"
          width="70%"
          :before-close="handleClose">
          <!-- 弹框内容 -->
          <div id="printContent">
            <p>北京京师大物业公司</p>
            <h2 class="title" >工程维修单</h2>
            <div class="serveclass">
              <span>服务类型：</span>
              <span>NO: {{temp.orderNumber}}</span>
            </div>
            <table border="1"   cellpadding="0" cellspacing="0"  >
                <tr>
                  <td colspan="4"><p>报修地址：{{temp.house_address}}</p></td>
                  <td colspan="3">业主名称：{{temp.userName}}</td>
                  <td colspan="2">联系人：{{temp.userName}}</td>
                </tr>
                <tr>
                  <td colspan="4">报修时间：{{temp.recordDate2}}</td>
                  <td colspan="3">联系电话：{{temp.phone}}</td>
                  <td colspan="2" >预约时间：{{temp.callTime2}}</td>
                </tr>
                <tr>
                  <td colspan="2">签发人：</td>
                  <td colspan="7" >签发日期：{{temp.recordDate2}}</td>
                </tr>
                <tr >
                  <td  rowspan="2">维修内容：</td>
                  <td colspan="7" rowspan="2" >{{temp.content}}</td>
                </tr>
                <tr>
                </tr>
                <tr>
                </tr>
                <tr>
                  <td colspan="2">材料名称：</td>
                  <td colspan="2">数量：</td>
                  <td colspan="2">价格：</td>
                  <td colspan="3"  rowspan="3">服务费总计（元）：<br><br>
                  报价人签名：____________</td>
                </tr>
                <tr>
                  <td colspan="2" style="height:30px;"> </td>
                  <td colspan="2" style="height:30px;"></td>
                  <td colspan="2" style="height:30px;"></td>
                </tr>
                <tr>
                  <td colspan="2" style="height:30px;"></td>
                  <td colspan="2" style="height:30px;"></td>
                  <td colspan="2 " style="height:30px;"></td>
                </tr>
                <tr>
                  <td  colspan="6">派单人：{{temp.manageUserName}}</td>
                  <td colspan="3">派单时间：</td>
                </tr>
                <tr>
                  <td  colspan="6">维修人：{{temp.disposeUserName}}</td>
                  <td colspan="3">维修时间：</td>
                </tr>
                <tr>
                  <td  colspan="6">开工时间：</td>
                  <td colspan="3">完工时间：</td>
                </tr>
                <tr>
                  <td colspan="9">完成情况：已完成：<span style=" border:1px solid;padding:0 7px;margin-right:70px;"></span> <span style="margin-right:70px">未完成:________________</span><span style="margin-right:0px;">其他：___________________________</span></td>
                </tr>
                <tr >
                  <td colspan="6" style="border-bottom:none;" rowspan="3">
                   <p> 业主确认付款方式： </p>
                  <p style="margin-left:65px">  现金支付：________________</p>
                    <p> <span style="margin-right:10px;">签字：_________________ </span>  <span>日期:_______________</span></p>

                  </td>
                  <td colspan="3" style="border-top:none" rowspan="3">
                    <p>业主验收意见：</p>
                    <p> 满意： <span style=" border:1px solid;padding:0 7px ;margin-right:15px;"></span>   较满意：<span style=" border:1px solid;padding:0 7px ;margin-right:15px;"></span>   不满意：<span style=" border:1px solid;padding:0 7px ;"></span>   _______________</p>
                    
                   
                  <p>  <span style="margin-right:10px;">签字：______________</span>  <span style="margin-right:10px;">日期:_______________</span></p>

                    </td>
                </tr>
                <tr>
                </tr>
                <tr>
                </tr>
                <tr >
                  <td colspan="3">
                    <p>维修人签字:______________   </p>
                    <p>日期：_________________</p>
                    </td>
                
                  <td colspan="3">
                    <p>签收人签字:______________</p>
                    <p>日期：______________</p>
                  </td>
                  <td colspan="3"> 
                    <p>客服中心收单人签名:________________ </p>
                    <p>日期：_________________</p>
                    </td>
                </tr>
            </table>
            <div class="lian">
              <span>第一联： 客服</span>
              <span>第二联： 工程</span>
              <span>第三联： 业主</span>

            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" v-print="'#printContent'">打 印</el-button>
          </span>
      </el-dialog>

实现步骤：
1、下载插件：

npm install vue-print-nb --save

2、下载print.js到本地，在项目的views目录下中创建plug文件，用于存放print.js文件

3、在main导入并注册：

import Print from 'vue-print-nb'
Vue.use(Print)

3.1在vue中使用
3.1在需要打印的区域添加一个id
3.2给打印按钮添加一个v-print指令，如：v-print=“printID”
具体代码如下：

<div id="printDiv">
     打印的内容
</div>  
<button v-print="'#printDiv'">打印</button>

eg:

实现的效果：