第一步: 下载 vue-print-nb-jeecg 插件

npm install vue-print-nb-jeecg –save

第二步: 在main.js中,引用并注册全局使用

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

第三步: 需要打印的元素添加 id

<div id="printMe">xxxx内容</div>

第四步: 打印按钮添加 v-print=“’#printMe’”

<el-button v-print="'#printMe'" type="primary">打印</el-button>

最好的处理方式就是手写一个table，下面有一个比较简单的示例。

HTML部分：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>

数据部分：

data: {
      apiData: [
        { id: 3, name: "王五", age: 28, gender: "女" },
        { id: 2, name: "李四", age: 30, gender: "男" },
        { id: 1, name: "张三", age: 25, gender: "男" }
      ],
    },

样式部分：

table {
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: #f0f2f5;
  border-collapse: collapse;
  color: #454545;
  table-layout: auto;
  width: 100%;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dadcde;
}
thead {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dadcde;
  line-height: 40px;
  font-weight: bold;
  color: #454c70;
}
tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dadcde;
  line-height: 23px;
}
td {
  padding: 5px 10px;
  font-size: 14px;
  font-family: Verdana;
  word-break: break-all; /* 元素换行*/
}
/* // 斑马纹效果stripe */
tr:nth-child(even) {
  background: #f5f7f9;
}
tr:nth-child(odd) {
  background: #fff;
}

这样就可以使用竖版或者是横版了，OK完美解决了，不用去各种百度、各种问。最重要的是直接复制直接用。