目標：
點選按鈕後可以打印其他頁面的內容，可用於套版、內部表單套印...等等。
程式碼：
1.View(HTML布局)
<h2>維修申請單</h2> <form id="RepairForm">
<p> @Html.Label("dept", "申請部門")
<select class="DropDownList" id="dept" name="dept"></select>
<br /> @Html.Label("deviceType", "設備類型")
<select class="DropDownList" id="deviceType" name="deviceType"></select>
<br /> @Html.Label("deviceId", "設備編號")
<select class="DropDownList" id="deviceId" name="deviceId"></select>
<br /> @Html.Label("problemType", "問題類型")
<select class="DropDownList" id="problemType" name="problemType"></select>
<br /> @Html.Label("problemDesc", "問題描述")
@Html.TextArea("problemDesc")
<br /> <!--<button id="btnTest" name="btnTest" type="button" onclick="test()">測試DropDownList's Value</button>--> </p> <input type="submit" value="提出申請" />
</form> <a class="btnPrint" id="printClick"/>
此次主角在這句<a class="btnPrint" id="printClick"/>
2.View(JavaScript)
在$(document).ready()中放入以下程式碼
$(document).ready(function () {
$(".btnPrint").printPage({
message: "請稍後...打印準備中..."
})
})
提交表單後按jQuery dialog的打印按鈕後打印/Home/About頁面
$("#RepairForm").submit(
function () {
$(".DropDownList").attr("disabled", false); //提交前把控件開啟才能提交
if (problemType.value == "Value") {
alert("Hey,你資料沒填完整！！");
location.reload(); //資料寫錯就重新整理重填
return false;
}
$.post("/Repair/PostData", //接收提交的Action
$("#RepairForm").serialize(), //提交
function (result) {
if (result.msg == "Error") {
alert("Hey,你資料沒填完整！！");
location.reload(); //資料寫錯就重新整理重填
} else {
//jQuery UI Dialog
var html =
'<div class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-print" style="float: left; margin: 0 7px 0 0;"></span>' +
'您的申請單號為[' + result.msg + ']<br/><br/>是否現在打印？' +
' </p>' +
'</div>';
return $(html).dialog({
modal: true,
title: "是否需要打印？",
buttons: {
"打印": function () {
//jQuery.printPage
var urlPrint = '/Home/About'; //設定打印網址
var obj = document.getElementById('printClick');
obj.href = urlPrint; //改變打印目標
obj.click(); //打印
$(this).dialog("close"); //打印後關閉Dialog
}
}
});
}//else
},
"json" //接收由Controller返回的資料類型
);
return false; //避免讓ASP.NET處理Submit($post)
}); //Submit
3.其餘後端Code略
運行結果：
1.提交表單彈出dialog
2.printPage開始準備文檔
3.Chrome的打印預覽
備註：
1.插件網址:http://plugins.jquery.com/printpage/
2.測試環境