使用js在前端web页面调用打印机
Posted 阿波糍嘚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用js在前端web页面调用打印机相关的知识，希望对你有一定的参考价值。
使用js在前端web页面调用打印机
最近参与了一个比较老的项目改造，需要使用到打印机相关的技术。
由于打印机也是比较老旧，所以没有SDK相关的应用，虽然有桌面的插件，但是需要集成到web中来，最终找到了lodop这个万能驱动。
这个是打印机是针式的，所以总结了以下一些方法，目前对我来说是够用了。
安装：
在http://www.lodop.net/download.html的官网主页下载发行包
安装之后启动就可以了，然后调用下面的方法来实现打印。
方法函数
getLodop() 初始化打印控件
PRINT_INIT(name) 初始化打印, name: 打印文档名称，该名称可在打印设备队列中看到
GET_PRINTER_COUNT() 获得打印机个数
GET_PRINTER_NAME(intPrinterIndex) 用序号获得打印机名，一般序号从0开始，-1特指默认打印机；
SET_PRINTER_INDEX() 按序号或名称指定打印机，选定后禁止手工重选；一般设置为-1，用于指定使用默认打印机
SET_PRINT_STYLE(attr, value) 设置基本打印样式
attr: 属性， FontSize、FontColor等
value: 属性值
SET_PRINT_STYLEA(index, attr, value) 设置具体某条打印样式
index: 索引，0是最近一条的样式，序号1开始
attr: 属性， FontSize、FontColor等
value: 属性值
SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName) 设定纸张大小
intOrient：打印方向及纸张类型
1—纵向打印，固定纸张；
2—横向打印，固定纸张；
3—纵向打印，宽度固定，高度按打印内容的高度自适应
0—方向不定，由操作者自行选择或按打印机缺省设置。
intPageWidth：
纸张宽，单位为0.1mm 譬如该参数值为45，则表示4.5mm,计量精度是0.1mm。
intPageHeight：
固定纸张时该参数是纸张高；高度自适应时该参数是纸张底边的空白高，计量单位与纸张宽一样。
strPageName：
纸张类型名， intPageWidth等于零时本参数才有效，具体名称参见操作系统打印服务属性中的格式定义。
关键字“CreateCustomPage”会在系统内建立一个名称为“LodopCustomPage”自定义纸张类型。
ADD_PRINT_TEXT(top, left, width, height, text) // 添加打印文本
top: 距离纸张顶部的距离
left: 距离纸张左边的距离
width: 当前文本的宽度 如果宽度小于字符长度则会被隐藏
height: 当前文本的高度 高度小于字符高度没有影响
text: 文本字符串
ADD_PRINT_TABLE(top, left, width, height, tableDom) 打印表格，可打印HTML绘制的表格
top: 距离纸张顶部的距离
left: 距离纸张左边的距离
width: 当前文本的宽度 使用百分比更好
height: 当前文本的高度 使用百分比更好
tableDom: table的dom元素
ADD_PRINT_HTM(top, left, width, height, dom); 打印HTML元素，不可以打印css画出来的椭圆
top: 距离纸张顶部的距离
left: 距离纸张左边的距离
width: 当前元素的宽度
height: 当前元素的高度
dom: dom元素
NewPage() 添加新的一页，比较适合用于续打
PREVIEW() 打印预览
PRINT() 直接打印
PRINT_DESIGN() 打印设计，可以设计模板然后生成代码直接用
示例
function templatePrint()
// 初始化打印机
let LODOP = getLodop();
// 初始化打印名称
LODOP.PRINT_INIT('测试打印')
LODOP.SET_PRINTER_INDEX(-1) // 设置使用的打印机，-1表示使用默认打印机
LODOP.SET_PRINT_STYLE('FontSize', 24); // 设置基本样式，字体大小24
LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'CreateCustomPage') // 设置打印方向和纸张大小
// LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4') // 直接设置A4纸规格
LODOP.ADD_PRINT_TEXT(100, 100, 500, 20, '测试文本1'); // 添加打印文字
LODOP.ADD_PRINT_TEXT(200, 100, 500, 20, '测试文本2'); // 添加打印文字
LODOP.SET_PRINT_STYLEA(2, 'FontSize', 24); // 指定第二条的字体样式
LODOP.NewPage() // 添加一页，续打
LODOP.ADD_PRINT_TABLE(0, 0, "100%", '100%', dom); // 打印表格
LODOP.NewPage() // 添加一页，续打
LODOP.ADD_PRINT_HTM(0, 0, 500, 100, dom); // 打印HTML内容
LODOP.PREVIEW() // 打印预览
// LODOP.PRINT() // 直接打印
// LODOP.PRINT_DESIGN() // 打印设计
layui js 自定义打印功能实现
꧁༺蓝冰༻꧂
已于 2022-02-22 17:58:08 修改
655
收藏 1
分类专栏： 前端 文章标签： javascript layui 前端
版权
前端
专栏收录该内容
10 篇文章0 订阅
订阅专栏
打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印
项目依赖：
layui
jquery
记得换layui和jquery引入路径完整项目代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui打印</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
</head>
<body class="layui-bg-gray">
<div style="margin: 20px;">
<div class="layui-card">
<div class="layui-card-body">
<button type="button" class="layui-btn layui-btn-normal"
onclick="print('test')">layui自定义打印表格</button>
<button id="printSelect" type="button" class="layui-btn layui-btn-normal">自定义打印</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use('table', function()
var table = layui.table;
table.render(
elem: '#test',
data: [
"id": "10001",
"username": "张三",
"email": "189461@qq.com",
"sex": "男",
"city": "广西南宁",
"sign": "海内存知己，天涯若比邻",
"experience": "116",
"ip": "192.168.1.26",
"logins": "666",
"joinTime": "2022-02-22"
,
"id": "10002",
"username": "李四",
"email": "189461@qq.com",
"sex": "男",
"city": "广西贵港",
"sign": "海内存知己，天涯若比邻",
"experience": "12",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22",
,
"id": "10003",
"username": "王五",
"email": "189461@qq.com",
"sex": "男",
"city": "广西玉林",
"sign": "海内存知己，天涯若比邻",
"experience": "65",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
,
"id": "10004",
"username": "玛卡巴卡",
"email": "189461@qq.com",
"sex": "女",
"city": "广西百色",
"sign": "海内存知己，天涯若比邻",
"experience": "666",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
,
"id": "10005",
"username": "老五",
"email": "189461@qq.com",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "86",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
,
"id": "10006",
"username": "老六",
"email": "189461@qq.com",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "12",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
,
"id": "10007",
"username": "老七",
"email": "189461@qq.com",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "16",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
,
"id": "10008",
"username": "老八",
"email": "189461@qq.com",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "106",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
],
toolbar: '#toolbarDemo',
title: '用户数据表',
totalRow: true,
cols: [
[
type: 'checkbox',
fixed: 'left'
,
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
sort: true,
totalRowText: '合计'
,
field: 'username',
title: '用户名',
width: 120,
edit: 'text'
,
field: 'email',
title: '邮箱',
width: 150,
edit: 'text',
templet: function(res)
return '<em>' + res.email + '</em>'
,
field: 'experience',
title: '积分',
width: 80,
sort: true,
totalRow: true
,
field: 'sex',
title: '性别',
width: 80,
edit: 'text',
sort: true
,
field: 'logins',
title: '登入次数',
width: 110,
sort: true,
totalRow: true
,
field: 'sign',
title: '签名'
,
field: 'city',
title: '城市',
width: 100
,
field: 'ip',
title: 'IP',
width: 120
,
field: 'joinTime',
title: '加入时间',
width: 120
,
fixed: 'right',
title: '操作',
toolbar: '#barDemo',
width: 150
]
],
page: true
);
//工具栏事件
table.on('toolbar(test)', function(obj)
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event)
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选')
break;
;
);
);
/*
* layui打印表格自定义函数
*/
function print(tablelayid)
var v = document.createElement("div");
var f = ["<head>", "<style>", "bodyfont-size: 12px; color: #666;",
"tablewidth: 100%; border-collapse: collapse; border-spacing: 0;",
"th,tdline-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;",
"acolor: #666; text-decoration:none;", "*.layui-hidedisplay: none", "</style>", "</head>"
].join("");
$(v).append($(".layui-table-box").find(".layui-table-header").html());
$(v).find("tr").after($("[lay-id=\\"" + tablelayid + "\\"] .layui-table-body.layui-table-main table").html());
$(v).find("th.layui-table-patch").remove();
$(v).find(".layui-table-col-special").remove();
var h = window.open("打印窗口", "_blank");
h.document.write(f + $(v).prop("outerHTML"));
h.document.close();
h.print();
h.close();
/* 监听打印选中行按钮 */
$('#printSelect').click(function()
layui.use(['table', 'layer'], function()
var table = layui.table,
layer = layui.layer;
var checkStatus = table.checkStatus('test')
console.log(checkStatus)
// 判断是否选中数据
if (checkStatus.data.length === 0)
layer.msg('请选择数据',
icon: 2
)
else
printSelect(checkStatus.data)
)
)
/*
* [自定义打印选中行数据]
* @param [type] allData [传入选中行]
*/
function printSelect(allData)
//用于包含内容
var v = document.createElement("div");
//页面头部，导入css ，media="print"表示打印时使用该样式
var f = ["<head>", "<style>", "divfont-size:16px;", ".mainwidth:100%;height:100%",
".main divwidth:300px;margin-right: 50px;display:inline-block;", "</style>", "</head>"
].join("");
var contentHtml = "";
for (let i = 0; i < allData.length; i++)
var data = allData[i]
var template =
"<div class='main'>" +
"<div>ID:" + data.id + "</div>" +
"<div>用户名:" + data.username + "</div><br><br>" +
"<div>邮箱:" + data.email + "</div>" +
"<div>积分:" + data.experience + "</div><br><br>" +
"<div>性别:" + data.sex + "</div>" +
"<div>登录次数:" + data.logins + "</div><br><br>" +
"<div>签名:" + data.sign + "</div>" +
"<div>城市:" + data.city + "</div><br><br>" +
"<div>IP:" + data.ip + "</div>" +
"<div>加入时间:" + data.joinTime + "</div><br><br>" +
"</div>"
contentHtml += template;
//contentHtml为已拼凑好的内容
$(v).append(contentHtml)
//新建窗口
var h = window.open("打印窗口", "_blank");
//写入拼凑内容
h.document.write(f + $(v).prop("outerHTML"));
//调用打印
h.print();
//关闭页面
h.close();
</script>
</html>
以上是关于使用js在前端web页面调用打印机的主要内容，如果未能解决你的问题，请参考以下文章