[jQuery] 使用jQuery printPage plugin打印其他頁面內容

目標：

點選按鈕後可以打印其他頁面的內容，可用於套版、內部表單套印...等等。

程式碼：

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.測試環境