Files
justar_client/src/views/list_printer.html

138 lines
3.4 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>选择打印机</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
</head>
<style>
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
padding: 5% 0;
}
.list-group {
height: 80%;
overflow: auto;
margin-bottom: 10%;
}
.printer-btn-box {
display: flex;
justify-content: flex-end;
padding: 0 3%;
}
.printer-btn {
width: 100%;
display: flex;
justify-content: flex-end;
}
.active {
background-color: #c6c9ce !important;
border-color: #c6c9ce !important;
}
.printer-button {
width: 65px;
margin-right: 10px;
background-color: #4495ec !important;
border-color: #4495ec !important;
}
.printer-button:hover {
background-color: #4495ec !important;
border-color: #4495ec !important;
}
.cancel-button {
width: 65px;
color: #4495ec !important;
background-color: #fff !important;
border-color: #4495ec !important;
}
.cancel-button:hover {
color: #4495ec !important;
background-color: #fff !important;
border-color: #4495ec !important;
}
</style>
<body>
<div class="container-fluid" id="div">
<div class="list-group">
</div>
<div class="printer-btn-box">
<div class="printer-btn">
<button type="button" class="btn btn-success printer-button">打印</button>
<button type="button" class="btn btn-danger cancel-button">取消</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.$ = window.jQuery = require('jquery');
const ipcRenderer = require('electron').ipcRenderer;
let printData = {
printer: '',
pdf_url: ''
}
$(function () {
// 获取打印机数据,拼接打印机列表
ipcRenderer.on('printerData', function (event, json_data) {
let data = JSON.parse(json_data)
let defaultPrinter = data.defaultPrinter;
printData.pdf_url = data.pdf_url;
// 绘制页面
let html = [];
for (const printer of data.listPrinter) {
2022-08-11 11:25:49 +08:00
if (printer.name === defaultPrinter) {
2022-09-28 09:18:01 +08:00
html.push(`<a href="#" class="list-group-item list-group-item-action active" data-name="${printer}">
<i class="bi bi-printer-fill"></i> &nbsp;${printer}
</a>
`)
2022-09-28 09:18:01 +08:00
printData.printer = printer;
continue;
}
2022-09-28 09:18:01 +08:00
html.push(`<a href="#" class="list-group-item list-group-item-action" data-name="${printer}">
<i class="bi bi-printer-fill"></i> &nbsp;${printer}
</a>
`)
}
$(".list-group").html(html.join(''));
})
// 绑定列表点击事件
$(".list-group").on('click', 'a', function () {
$(".list-group a").removeClass('active');
$(this).addClass('active');
printData.printer = $(this).data('name');
})
// 绑定打印点击事件
$(".printer-button").click(function () {
let data = JSON.stringify(printData);
ipcRenderer.send('print', data)
});
// 绑定取消打印事件
$(".cancel-button").click(function () {
ipcRenderer.send('close_listPrinter');
})
})
</script>