使用 layui 框架打印表單,需要依次執行以下步驟:引入 layui 文件、創建打印按鈕、監聽按鈕事件、獲取表單內容、調用 layui 打印功能。例如,使用 jquery 獲取表單內容并打印:$(‘#form’).html() 傳遞給 print({title: ‘表單打印’, content: content})。
layui 打印表單的實現
問題:如何使用 layui 框架打印表單?
回答:
使用 layui 框架打印表單,需要以下步驟:
步驟 1:引入 layui 文件
<code class="html"><script src="layui/layui.js"></script></code>
登錄后復制
步驟 2:創建按鈕
創建一個按鈕來觸發打印功能。
<code class="html"><button id="printBtn">打印表單</button></code>
登錄后復制
步驟 3:監聽按鈕事件
使用 layui 的 on() 方法監聽按鈕點擊事件。
<code class="javascript">layui.use(['layer', 'print'], function () {
var layer = layui.layer;
var print = layui.print;
layui.on('click', '#printBtn', function () {
// ...
});
});</code>
登錄后復制
步驟 4:獲取表單內容
在監聽器函數中,使用 jQuery 或 layui 的 html() 方法獲取表單內容。
例如,使用 jQuery:
<code class="javascript">var content = $('#form').html();</code>
登錄后復制
步驟 5:調用 layui 打印功能
使用 print() 方法打印表單內容。
<code class="javascript">print({
title: '表單打印', // 打印標題
content: content, // 打印內容
});</code>
登錄后復制
示例代碼:
<code class="html">
<script src="layui/layui.js"></script><form id="form">
<input type="text" value="姓名"><input type="text" value="年齡">
</form>
<button id="printBtn">打印表單</button>
<script>
layui.use(['layer', 'print'], function () {
var layer = layui.layer;
var print = layui.print;
layui.on('click', '#printBtn', function () {
var content = $('#form').html();
print({
title: '表單打印',
content: content
});
});
});
</script></code>
登錄后復制






