第一步: 下载 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完美解决了,不用去各种百度、各种问。最重要的是直接复制直接用。