这篇文章是一个关于前端打印报表功能的实现,前端小白,如有问题多多指教,大佬勿喷!!!!
案例描述:点击打印按钮,调用浏览器打印功能,实现打印报表。
一:以下是前端布局页面
<!-- 打印报表的弹框内容 -->
<el-dialog
title="报表打印"
:visible.sync="dialogVisible"
width="70%"
:before-close="handleClose">
<!-- 弹框内容 -->
<div id="printContent">
<p>北京京师大物业公司</p>
<h2 class="title" >工程维修单</h2>
<div class="serveclass">
<span>服务类型:</span>
<span>NO: {{temp.orderNumber}}</span>
</div>
<table border="1" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="4"><p>报修地址:{{temp.house_address}}</p></td>
<td colspan="3">业主名称:{{temp.userName}}</td>
<td colspan="2">联系人:{{temp.userName}}</td>
</tr>
<tr>
<td colspan="4">报修时间:{{temp.recordDate2}}</td>
<td colspan="3">联系电话:{{temp.phone}}</td>
<td colspan="2" >预约时间:{{temp.callTime2}}</td>
</tr>
<tr>
<td colspan="2">签发人:</td>
<td colspan="7" >签发日期:{{temp.recordDate2}}</td>
</tr>
<tr >
<td rowspan="2">维修内容:</td>
<td colspan="7" rowspan="2" >{{temp.content}}</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">材料名称:</td>
<td colspan="2">数量:</td>
<td colspan="2">价格:</td>
<td colspan="3" rowspan="3">服务费总计(元):<br><br>
报价人签名:____________</td>
</tr>
<tr>
<td colspan="2" style="height:30px;"> </td>
<td colspan="2" style="height:30px;"></td>
<td colspan="2" style="height:30px;"></td>
</tr>
<tr>
<td colspan="2" style="height:30px;"></td>
<td colspan="2" style="height:30px;"></td>
<td colspan="2 " style="height:30px;"></td>
</tr>
<tr>
<td colspan="6">派单人:{{temp.manageUserName}}</td>
<td colspan="3">派单时间:</td>
</tr>
<tr>
<td colspan="6">维修人:{{temp.disposeUserName}}</td>
<td colspan="3">维修时间:</td>
</tr>
<tr>
<td colspan="6">开工时间:</td>
<td colspan="3">完工时间:</td>
</tr>
<tr>
<td colspan="9">完成情况:已完成:<span style=" border:1px solid;padding:0 7px;margin-right:70px;"></span> <span style="margin-right:70px">未完成:________________</span><span style="margin-right:0px;">其他:___________________________</span></td>
</tr>
<tr >
<td colspan="6" style="border-bottom:none;" rowspan="3">
<p> 业主确认付款方式: </p>
<p style="margin-left:65px"> 现金支付:________________</p>
<p> <span style="margin-right:10px;">签字:_________________ </span> <span>日期:_______________</span></p>
</td>
<td colspan="3" style="border-top:none" rowspan="3">
<p>业主验收意见:</p>
<p> 满意: <span style=" border:1px solid;padding:0 7px ;margin-right:15px;"></span> 较满意:<span style=" border:1px solid;padding:0 7px ;margin-right:15px;"></span> 不满意:<span style=" border:1px solid;padding:0 7px ;"></span> _______________</p>
<p> <span style="margin-right:10px;">签字:______________</span> <span style="margin-right:10px;">日期:_______________</span></p>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr >
<td colspan="3">
<p>维修人签字:______________ </p>
<p>日期:_________________</p>
</td>
<td colspan="3">
<p>签收人签字:______________</p>
<p>日期:______________</p>
</td>
<td colspan="3">
<p>客服中心收单人签名:________________ </p>
<p>日期:_________________</p>
</td>
</tr>
</table>
<div class="lian">
<span>第一联: 客服</span>
<span>第二联: 工程</span>
<span>第三联: 业主</span>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" v-print="'#printContent'">打 印</el-button>
</span>
</el-dialog>
实现步骤:
1、下载插件:
npm install vue-print-nb --save
2、下载print.js到本地,在项目的views目录下中创建plug文件,用于存放print.js文件
3、在main导入并注册:
import Print from 'vue-print-nb'
Vue.use(Print)
3.1在vue中使用
3.1在需要打印的区域添加一个id
3.2给打印按钮添加一个v-print指令,如:v-print=“printID”
具体代码如下:
<div id="printDiv">
打印的内容
</div>
<button v-print="'#printDiv'">打印</button>
eg:
实现的效果: