PC管理端的页面打印功能

客户需求

项目：PC端管理项目
前端：vue、ant-Design-vue
客户要求给个别报表功能添加 打印 按钮

开发步骤

1. 先下载打印插件 npm install vue-print-nb-jeecg --save
2. 在main.js引入
   import print from ‘vue-print-nb-jeecg’
   Vue.use(print)
3. 在需要的页面直接添加打印按钮。示例：
   注意：v-print对应的id值需要和被打印的元素id值保持一致。

<template>
	<div class="hello" style="display: flex;justify-content: center;">
		<div>
			<a-button v-print="'#oneTable'" style="margin-bottom: 20px;">打印表格</a-button>
			<a-table id='oneTable' :columns="columns" :data-source="data" rowKey='cateId' bordered style="width:80%">
			</a-table>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'nub',
		data() {
			return {
				columns: [{
						title: '英雄类型',
						dataIndex: 'cateId',
						width: 140,
					},
					{
						title: '名称',
						dataIndex: 'orderNo',
						width: 140,
					},
					{
						title: '生产日期',
						dataIndex: 'produtionTime',
						width: 145,
					},
					{
						title: '完成日期',
						dataIndex: 'endTime',
						width: 120,
					},
					{
						title: '备注',
						dataIndex: 'remark',
						width: 200,
					},
				],
				data: [{
						cateId: '射手',
						orderNo: '后羿',
						produtionTime: '2021-12-09',
						endTime: '2023-12-09',
						remark: '攻速快，易上手',
					},
					{
						cateId: '刺客',
						orderNo: '兰陵王',
						produtionTime: '2021-12-09',
						endTime: '2023-12-09',
						remark: '隐身接近',
					},
					{
						cateId: '辅助',
						orderNo: '蔡文姬',
						produtionTime: '2021-11-09',
						endTime: '2023-01-09',
						remark: '移动的加油站',
					},
				]
			}
		},
		mounted() {},
		methods: {}
	}
</script>
<style scoped>
</style>

插件官网链接：https://www.npmjs.com/package/vue-print-nb-jeecg

打印效果：

在该管理端项目中，大部分功能页面的表格进行打印均没有问题，当我以为大功告成之时，不出意外的话，意外就要发生了，由于项目中有一个列头复杂且列名过多的表格，使用此打印组件，总有个别列的边框不显示，所以，对于这种表出现的问题，我采用了原生的table标签然后进行处理。（其他兄弟们，如果有好的处理方式，欢迎留言评论，大家共同进步）
处理前：

处理后：

提示：部分原生table标签代码

        <template>
	         <div>
	          <table id='oneTable'>
	            <thead>
	              <tr>
	                <th rowspan="2">序号</th>
	                <th rowspan="2">英雄</th>
	                <th rowspan="2">国籍</th>
	                <th rowspan="2">兵种</th>
	                <th colspan="2">数量</th>
	                <th rowspan="1">重量</th>
	                <th rowspan="2">备注1</th>
	                <th rowspan="2">家乡</th>
	                <th rowspan="2">母语</th>
	                <th rowspan="2">崇拜者</th>
	                <th rowspan="2">备注2</th>
	              </tr>
	              <tr>
	                <th>要求1</th>
	                <th>要求2</th>
	                <th>净重</th>
	              </tr>
	            </thead>
	            <tbody>
	              <tr>
	                <td>1</td>
	                <td>盖亚</td>
	                <td>美国</td>
	                <td>特工</td>
	                <td>12</td>
	                <td>16</td>
	                <td>98</td>
	                <td>德州</td>
	                <td>真的</td>
	                <td>英语</td>
	                <td>大声发</td>
	                <td>就是的</td>
	              </tr>
	            </tbody>
	          </table>
	          </div>
          </template>
          <style scoped>
			table {
			  border-collapse: collapse;
			  width: 100%;
			}
			
			th,
			td {
			  border: 1px solid black;
			  padding: 5px;
			  text-align: center;
			}
		</style>

小结

vue-print-nb-jeecg 插件在项目中打印功能，按照步骤使用即可，后面或许还会用到其他新插件，所以先把这个插件做一下记录。