JavaScript在表單頁面添加打印功能，打印表單中的值並打印完成后不刷新頁面

在一個項目中，有一個功能需求

在一個頁面上，有一個表單，表單包括textbox, radiobutton, checkbox, textarea等控件

用戶填寫表單后，按下submit按鈕提交表單

現在用戶有個需求，他們希望在這個頁面上增加一個print按鈕或者鏈接

點擊print時，可以打印

 

最簡單的想法就是，加上一個print的鏈接，然后調用javascript中的window.print()能打印

我最初是這樣寫代碼的

在網頁上增加一個print的鏈接

<a href="javascript:void(0)" onclick="printProduct()"><i class="fa fa-print" aria-hidden="true"></i>Print this page</a>

或者，也可以寫成這樣

<a href="javascript:printProduct()"><i class="fa fa-print" aria-hidden="true"></i>Print this page</a>

 然后，javascript的printProduct方法寫成如下

function printProduct()
{
    document.body.innerHTML = document.getElementById("printDiv").innerHTML;
    window.print();
    history.go(0);
}

頁面上，需要打印的表單寫在id=printDiv的div中

實現這個功能后，發現幾個問題

1.在頁面填寫好表單內容后，點擊打印按鈕時，打印出來的表單內容是空的，沒有任何內容

2. 打印完成后，回到網頁上，剛才網頁上填寫的內容，也全部都消失了

為什么會出現這種情況呢，怎么解決呢？

 產生這個問題的原因是

$("#form").html()時，沒有包含你在網頁上填寫的數據。 為了解決這個問題，你需要用html()之前，把你在網頁上填入表單的所有數據都val('')先

也就是說，在調用window.print()之前，我們需要一個javascript來bindData

這里，我寫了一個bindData的javascript函數

function bindData()
{
    $("input[type='text'],select option").each(function () {
        $(this).attr('value', $(this).val());
    });

    $("input[type='radio'],input[type='checkbox']").each(function () {

        if ($(this).attr('checked'))
            $(this).attr('checked', true);
        else
            $(this).removeAttr('checked');

    });

    $("select option").each(function () {

        if ($(this).attr('selected'))
            $(this).attr('selected', true);
        else
            $(this).removeAttr('selected');
    });

    $('textarea').each(function () {
        $(this).html($(this).val());
    });


}

這樣，把這個javascript函數放在打印之前。上面發生的第1個問題就解決了

我們在看第2個問題，點擊打印按鈕后，回到網頁，發現網頁上，你之前填寫的內容都沒有了

為了解決這個問題，我們采用另一種方式

我們在Javascript代碼中，臨時創建一個window窗口，然后把你要打印的內容寫入這個臨時的window窗口，打印完成后，再關閉這個新創建的窗口

代碼如下

function printProduct()
{
    bindData();

    var printContent = document.getElementById("printDiv").innerHTML;
    var newWindow = window.open();
    newWindow.document.write(printContent);
    newWindow.print();
    newWindow.close();

   
}

到這里，整個網頁表單打印功能就完成了