需求说明
这次的需求可能就比较简单了,就是实现web端的打印,但是是根据需求打印,而不是直接打印全部
效果预览
我要做的是一个简单的打印,就是客户选择了一个dialog,这个时候需要将这个记录打印出来,直接打印就可以了
源码
代码语言:javascript复制/**
* @printObj 打印
* @param printWindow 接收页面元素
* @param printContent 写入需要打印的元素
*/
printObj(print_element){
let printWindow;
let printContent = document.getElementById(print_element).innerHTML;
printWindow = window.open('','_blank','width=500,height=300,location=0,menubar=0,status=0,toolbar=0,scrollbars=1');
printWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"><meta name="keywords" content="" /><meta name="description" content="" /><title></title></head><body>');
printWindow.document.write('<div style="width:100%; height:100%; overflow:hidden;">' printContent "</div>");
printWindow.document.write("</body></html>");
printWindow.focus();
printWindow.document.close();
printWindow.print();
printWindow.close();
},
代码语言:javascript复制<!--前台入账简表 - dialog-->
<el-dialog title="前台入账简表" id="print_003" :close-on-click-modal = 'false' :visible.sync="dialogTableVisible_003">
<el-table :data="gridData_003" height="400" :cell-style="{textAlign:'center'}"
:header-cell-style="{textAlign:'center'}" size="mini">
<el-table-column property="amount" label="amount"></el-table-column>
<el-table-column property="code" label="代码"></el-table-column>
<el-table-column property="count" label="数量"></el-table-column>
</el-table>
<button @click="printObj('print_003')" style="width: 80px;height: 27px;line-height: 27px;margin-top: 10px;color: #FFFFFF;border: none;border-radius: 4px;background: #4488E9">打印</button>
</el-dialog>
- 这里需要 注意的是一点,就是打印的时候如果显示的不完全的话,可以直接选择横向打印,或者下面的更多选项中选择无边框打印就不会出现这样的问题了。
- 当然如果只是打印当前的页面的话,那就是直接window.print就可以了。不应处理别的。
js 是参考了别人的写的,只是根据自己的需求改的,改了以后分享给大家,觉得可以用的可以直接拿去使用就可以了。