实现打印功能(PDF)

170 阅读1分钟
1.下载打印的插件
npm i vue-print-nb | yarn add vue-print-nb
2.在main.js中引入并use使用
import Print from 'vue-print-nb' 
Vue.use(Print);
3.使用:全局注册了插件后,就会有一个v-print的全局自定义指令
   <div id="single-info">
      <el-button id="info-btn"  v-print="'#single-info'">打印</el-button>
      <h2 class="centInfo">岗位信息表</h2>
      <table cellspacing="0" width="100%" class="tableList">
        <tr class="title">
          <td colspan="4" class="centInfo">基本信息</td>
        </tr>
        <tr>
          <th style="width: 10%">姓名</th>
          <td style="width: 40%">123</td>
          <th style="width: 10%">入职日期</th>
          <td style="width: 40%">123</td>
        </tr>
        <tr>
          <th>部门</th>
          <td>depart</td>
          <th>岗位</th>
          <td>formD</td>
        </tr>
      </table>
  </div>