elementUI+vue+printJs实现页面表格数据打印功能实例

npm install print-js --save

import printJS from 'print-js'

<button @click="printAll">打印</button>

 <div id="printBox">
        // 这里是<el-table>数据
       <el-table>
      </el-table>
</div>

      // 打印数据
      async printAll() {
        // 由于上面表格展示的数据分页了，这个地方可以加载全部数据，不分页
        await this.getList();
        // 打印js
        printJS({
          printable: 'printBox', //打印区域id
          type: 'html',    // 打印类型是html
          header: '打印表头标题',
          headerStyle: 'text-align:center; font-size:24px;',
          footer: ' ',
          maxWidth: 800, // 最大宽度
          documentTitle: ' ',
          scanStyles: false, // 自定义样式
          // 直接在 style 中设置横向打印
          style: '@media print {@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;} body{zoom: 87%; margin:0mm 5mm 0mm 5mm;} tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}'
        })
      }

// 设置A4，横向打印，边距是10mm

@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;} 

// 缩放比例87%，内容边距5mm

body{zoom: 87%; margin:0mm 5mm 0mm 5mm;}

//设置表格内容剧中，边框及颜色，表格高度

tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}