持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

在最近的项目中需要打印页面中的指定区域，接触到了两个比较好用的打印插件：vue-print-nb和print.js，我在项目中使用的是 vue-print-nb 这个插件

需求——打印页面中的指定区域

插件一：vue-print-nb

1. 下包 npm install vue-print-nb --save

2. 全局注册

在 mian.js 中全局注册可以在整个项目中使用

import Print from 'vue-print-nb' 
Vue.use(Print); //注册

3. 使用

这里的需求是只打印指定区域，第一步是给要打印的区域使用 id="printAre" div包裹起来（这个id名是随便取的），第二步给打印按钮绑定v-print="printAre"，最后在data中写打印设置，id: "printAre" 为必填项。下面的代码可以直接复制到.vue文件夹中

<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" :column="3" :size="size">
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
      <div id="printAre">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="date"
            label="日期"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="100">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            width="120">
          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary"  v-print="printAre">打印</el-button>
    </el-card>
  </div>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        // 打印设置
        printAre: {
          id: "printAre",
          popTitle: "页眉部分",
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          age: 18,
          gender: '男',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, ......
        {
          date: '2016-05-07',
          name: '王小虎',
          age: 18,
          gender: '男',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

<style scoped>
  .el-card{
    width: 1200px;
  }
</style>

• 在网上查资料的时候看见有小伙伴说在使用这个插件时会出现以下两个问题，所以在有以下需求时建议使用print.js，其他时间使用vue-print-nb
  • 需要打印本地图片时显示不全
  • 无法打印 form 表单

插件二：print.js

1. 下包 npm install print-js --save

2. 在需要的页面引入 import printJS from 'print-js'

3. 使用

参考Print.js官网

// 用div包裹打印起源于
<div id="printAre">要打印区域<div>

// 按钮绑定点击事件
<el-button type="info" @click="handlePrint">打印</el-button>
handlePrint() {
     printJS({
       printable: printAre, // 'printFrom', // 标签元素id
       type: 'html',
       targetStyles: ['*'],
     })
   }

总结：以上两个插件在打印时会出现显示不全的问题，我的解决办法是在打印预览时，更多设置里面修改成自定义的缩放比