插件
npm install vue-print-nb --save
//安装好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print); //注册
二、基本使用
1)方法
① 给要打印的部分设置一个 id
② 在打印按钮中添加 v-print="'#id名'"
2)代码(以表格为例)
<div id="printMe" ref="printContent" class="printBox">
<div class="printTitle">热表分厂工艺路线卡</div>
<table id="cus-table" cellspacing="0">
<tr>
<td>订单号</td>
<td colspan="3">1</td>
<td>使用部门</td>
<td colspan="3">1</td>
<td>单位</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>零件号</td>
<td colspan="3">1</td>
<td>产品型号</td>
<td colspan="3">1</td>
<td>质量等级</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>批次号</td>
<td colspan="3">1</td>
<td>名称</td>
<td colspan="3">1</td>
<td>数量</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>材料</td>
<td colspan="3">1</td>
<td>零件面积</td>
<td colspan="3">1</td>
<td>设备编码</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>镀种</td>
<td colspan="7">1</td>
<td>硬度</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>标记要求</td>
<td colspan="7">1</td>
<td>工艺规程</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>工艺路线</td>
<td colspan="7">1</td>
<td>技术状态</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>关键信息</td>
<td colspan="10">1</td>
</tr>
<tr>
<td colspan="11">
<div style="font-size:21px">生产过程记录</div>
</td>
</tr>
<tr>
<td colspan="11">
生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据
</td>
</tr>
<tr>
<td colspan="11" />
</tr>
<tr>
<td rowspan="4">镀后</td>
</tr>
<tr>
<td colspan="6">实际参数</td>
<td colspan="2">操作者</td>
<td colspan="2">设备编号</td>
</tr>
<tr>
<td colspan="3">开始时间:2023/3/3</td>
<td colspan="3">结束时间:2023/3/3</td>
<td colspan="2">1</td>
<td colspan="2">1</td>
</tr>
<tr>
<td colspan="10">1</td>
</tr>
<tr>
<td colspan="11" />
</tr>
<tr>
<td>色标数量</td>
<td colspan="2">序号</td>
<td>颜色1</td>
<td>1</td>
<td>颜色2</td>
<td>1</td>
<td>油墨类</td>
<td>1</td>
<td>物料号</td>
<td>1</td>
</tr>
<tr>
<td>色带数量</td>
<td colspan="2">序号</td>
<td>颜色1</td>
<td>1</td>
<td>颜色2</td>
<td>1</td>
<td>油墨类</td>
<td>1</td>
<td>物料号</td>
<td>1</td>
</tr>
<tr>
<td rowspan="4">涂色标</td>
</tr>
<tr>
<td colspan="6">实际参数</td>
<td colspan="2">操作者</td>
<td colspan="2">设备编号</td>
</tr>
<tr>
<td colspan="3">开始时间:2023/3/3</td>
<td colspan="3">结束时间:2023/3/3</td>
<td colspan="2">1</td>
<td colspan="2">1</td>
</tr>
<tr>
<td colspan="10">1</td>
</tr>
<tr>
<td colspan="11" />
</tr>
<tr>
<td rowspan="5">市建委</td>
</tr>
<tr>
<td>车间订单</td>
<td colspan="2">1</td>
<td>流程卡号</td>
<td colspan="2">1</td>
<td>批次</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>产品号</td>
<td colspan="2">1</td>
<td>产品型号</td>
<td colspan="2">1</td>
<td>产品名</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>镀种信息</td>
<td colspan="2">1</td>
<td>接收数</td>
<td colspan="2">1</td>
<td />
<td colspan="3" />
</tr>
<tr>
<td>已合格数</td>
<td colspan="2">1</td>
<td>报废数量</td>
<td colspan="2">1</td>
<td />
<td colspan="3" />
</tr>
<tr>
<td colspan="11">
<div style="font-size:21px">检验记录</div>
</td>
</tr>
<tr>
<td>项目编号</td>
<td>检测项目</td>
<td>订单号</td>
<td>零件号</td>
<td>批次号</td>
<td>设备量具编码</td>
<td>试验数</td>
<td>抽样数</td>
<td>检验结果</td>
<td>检验员</td>
<td>检验日期</td>
</tr>
<template v-for="i in 6">
<tr :key="i">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</template>
<tr>
<td colspan="11">
<div style="font-size:21px">镀后接收记录</div>
</td>
</tr>
<tr>
<td>车间订单</td>
<td colspan="2">1</td>
<td>流程卡号</td>
<td colspan="3">1</td>
<td>批次</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>产品号</td>
<td colspan="2">1</td>
<td>产品型号</td>
<td colspan="3">1</td>
<td>产品名</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>镀种信息</td>
<td colspan="2">1</td>
<td>当前工序</td>
<td colspan="3">1</td>
<td>接收数</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>已合格数</td>
<td colspan="2">1</td>
<td>报废数量</td>
<td colspan="3">1</td>
<td />
<td colspan="3" />
</tr>
</table>
</div>
table td {
width: 168px;
height: 30px;
border: 1px solid rgba(0, 118, 200, 0.3);
background: transparent;
color: #7a9cc2;
font-size: 14px;
text-align: center;
padding: 0;
margin: 0;
}
@media print {
@page {
size: auto;
margin: 3mm;
}
}