解决vue-print-nb-jeecg打印el-table表格预览竖版显示不全的问题！

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！