parallel-port-printer
Version:
A Node.js application for using parallel port printers with ECS/POS commands.
127 lines (113 loc) • 3.82 kB
HTML
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>LPT 控制面板</title>
<style>
.setting-group {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.setting-group button {
margin-left: 10px;
}
</style>
</head>
<body>
<h2>印表機控制面板</h2>
<div class="setting-group">
<label>選擇列印埠：</label>
<select id="portSelect">
<option value="LPT1">LPT1</option>
<option value="LPT2">LPT2</option>
</select>
<button onclick="savePortSetting()">儲存預設列印埠</button>
</div>
<div class="setting-group">
<label>輸入文字：</label><br>
<input id="textInput" type="text" size="40" value="一二三四五六七八九十一二三四五六七八九十"><br><br>
<button onclick="sendPrint()">列印一行文字</button>
</div>
<div class="setting-group">
<label>換行數：</label>
<input id="newlineCount" type="number" value="8" min="1" max="20" style="width: 50px;">
<button onclick="sendNewline()">插入換行</button>
</div>
<div class="setting-group">
<button onclick="sendCut()">裁切紙張</button>
</div>
<div class="setting-group">
<button onclick="checkPrinterStatus()">檢查印表機狀態</button>
</div>
<script>
const api = 'http://localhost:3000';
// 頁面載入時讀取設定
window.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch(`${api}/settings`);
const settings = await response.json();
if (settings.PRINTER_PORT) {
document.getElementById('portSelect').value = settings.PRINTER_PORT;
}
} catch (err) {
console.error('讀取設定失敗：', err);
}
});
function getSelectedPort() {
return document.getElementById('portSelect').value;
}
async function savePortSetting() {
const port = getSelectedPort();
try {
const response = await fetch(`${api}/settings`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ port })
});
const result = await response.text();
alert(result);
} catch (err) {
alert('儲存設定失敗：' + err);
}
}
function sendPrint() {
const text = document.getElementById('textInput').value;
if (!text.trim()) return alert('請輸入文字');
sendCommand({ type: 'printLine', text, port: getSelectedPort() });
}
function sendNewline() {
const count = parseInt(document.getElementById('newlineCount').value) || 1;
sendCommand({ type: 'newline', count, port: getSelectedPort() });
}
function sendCut() {
sendCommand({ type: 'cut', port: getSelectedPort() });
}
async function checkPrinterStatus() {
try {
const port = getSelectedPort();
const response = await fetch(`${api}/printer-status`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ port })
});
const status = await response.json();
alert(`印表機狀態：${status.message}`);
} catch (err) {
alert('無法檢查印表機狀態：' + err);
}
}
function sendCommand(body) {
fetch(`${api}/command`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
})
.then(res => res.text())
.then(msg => console.log(msg))
.catch(err => alert('發生錯誤：' + err));
}
</script>
</body>
</html>