132 lines
4.1 KiB
HTML
132 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Print.js 打印演示</title>
|
||
|
|
<!-- 引入 Print.js 库 -->
|
||
|
|
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
|
||
|
|
<style>
|
||
|
|
/* 页面样式 */
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
#printContent {
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
padding: 10px 15px;
|
||
|
|
background-color: #2196F3;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
padding: 8px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 打印样式 - 去除页眉页脚 */
|
||
|
|
@media print {
|
||
|
|
@page {
|
||
|
|
margin: 0; /* 关键：去除页眉页脚空间 */
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 1cm; /* 保留内容边距 */
|
||
|
|
}
|
||
|
|
.no-print {
|
||
|
|
display: none !important; /* 隐藏不需要打印的元素 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Print.js 打印功能测试</h1>
|
||
|
|
<p>此页面演示如何使用 Print.js 实现静默打印和自定义打印。</p>
|
||
|
|
|
||
|
|
<!-- 打印内容区域 -->
|
||
|
|
<div id="printContent">
|
||
|
|
<h2>订单详情</h2>
|
||
|
|
<p>打印时间：<span id="printTime"></span></p>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>序号</th>
|
||
|
|
<th>商品名称</th>
|
||
|
|
<th>数量</th>
|
||
|
|
<th>单价</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>笔记本电脑</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>¥5999</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>2</td>
|
||
|
|
<td>无线鼠标</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>¥99</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<p class="no-print">* 此文档为测试用途，打印前请确认内容</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 打印按钮 -->
|
||
|
|
<div class="print-buttons">
|
||
|
|
<button onclick="silentPrint()">静默打印</button>
|
||
|
|
<button onclick="customPrint()">自定义打印</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 设置打印时间
|
||
|
|
document.getElementById('printTime').textContent = new Date().toLocaleString();
|
||
|
|
|
||
|
|
// 静默打印（无预览）
|
||
|
|
function silentPrint() {
|
||
|
|
printJS({
|
||
|
|
printable: 'printContent',
|
||
|
|
type: 'html',
|
||
|
|
style: '@page { margin: 0; } body { margin: 1cm; }', // 强制覆盖页眉页脚
|
||
|
|
onPrintDialogClose: () => console.log('打印完成')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 自定义打印（带标题和样式）
|
||
|
|
function customPrint() {
|
||
|
|
printJS({
|
||
|
|
printable: 'printContent',
|
||
|
|
type: 'html',
|
||
|
|
header: '<h3 style="text-align:center;">订单确认单</h3>', // 自定义页眉
|
||
|
|
css: 'https://printjs-4de6.kxcdn.com/print.min.css', // 加载默认样式
|
||
|
|
style: `
|
||
|
|
@page { margin: 0; }
|
||
|
|
body { font-size: 12pt; margin: 1cm; }
|
||
|
|
table { width: 100%; border-collapse: collapse; }
|
||
|
|
th, td { border: 1px solid #000; padding: 8px; }
|
||
|
|
`,
|
||
|
|
scanStyles: false // 禁用自动扫描页面样式
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|