JavaScript 實現局部打?。▌討B獲取的內容）

MingjunYang 發布于2019-08-22 11:22 / 3070人閱讀

摘要：第一次寫打印，只知道，可是直接出來的是當前頁面的所有內容，而我要做的是打印當前模態框里展示的內容。怎么辦，接著搜唄。

第一次寫打印，只知道window.print()，可是直接出來的是當前頁面的所有內容，而我要做的是打印當前模態框里展示的內容。
網上搜了一下，都是指定具體的div，然后獲取該div里的內容賦值給window.document.body.innerHTML

        var bodyHtml = window.document.body.innerHTML;
        window.document.body.innerHTML = html;//html為當前顯示的div的內容
        window.print();
        window.document.body.innerHTML = bodyHtml;

但是這個就導致了一個問題，如果是打印的內容這樣的，可以直接獲取打印，但如果是賦值到input標簽里的，根本就獲取不到值啊。
怎么辦，接著搜唄。
找到兩種方法，第一種，也是比較原始的：將表單中的數據進行綁定，獲取過來重新賦值給對應的input中;

  //打印模態框問卷內容
        $(".myform").on("click", "a[name="printInfo"]", function () {
            $("#listModal").modal("hide");//關閉模態框
            $("#quesInfoModal").modal("hide");
            var weI = this.id;
            onprint(weI);
        });
    });
    //打印指定區域
    function printHtml(html) {
        var bodyHtml = window.document.body.innerHTML;
        window.document.body.innerHTML = html;
        window.print();
        window.document.body.innerHTML = bodyHtml;
        //上面關于bodyHtml賦值的兩項操作可以忽略，因為要關閉模態框并且刷新頁面
        //這個地方必須要刷新一下頁面，打印重新賦值之后，模態框里的功能都不能正常使用，
        包括父頁面列表中的功能也失效，這個問題不是很明白，有知道的可以幫忙解決一下
        refreshFrame();//刷新頁面
    }
    function onprint(weI) {
        if (weI == "wenjuanI") {//調查問卷詳情
            bindData("#quesInfoModal");
            var html = $("#quesInfoModal").html();
        } else {
            bindData("#listModal");
            var html = $("#listModal").html();
        }

        printHtml(html);
    }
    //將表單中手動填寫的數據進行綁定，便于html()的時候獲取到  
    function bindData(modalID) {
        //type=text,type=number, 同時如果checkbox,radio,select>option的值有變化, 也綁定一下
        $(modalID + " input[type="text"]").each(function () {
            $(this).attr("value", $(this).val());
        });
        $(modalID + " input[type="number"]").each(function () {
            $(this).attr("value", $(this).val());
        });
         $(modalID + " input,select option").each(function(){  
            $(this).attr("value",$(this).val());  
        });  
        //type=checkbox,type=radio 選中狀態  
        $(modalID + " input[type="radio"]").each(function () {
            if ($(this).attr("placeholder")) {//$(this).attr("checked")
                $(this).attr("checked", true);
            } else {
                $(this).removeAttr("checked");
            }
        });
        $(modalID + " input[type="checkbox"]").each(function () {
            if ($(this).attr("placeholder")) {//$(this).attr("checked")
                $(this).attr("checked", true);
            } else {
                $(this).removeAttr("checked");
            }
        });

        //$(".modal-backdrop").each(function () {//關閉模態框的遮罩層
        //    $(this).removeClass("in");
        //});
    }

注意：這種方法，必須要刷新一下頁面，打印重新賦值之后，模態框里的功能都不能正常使用，包括父頁面列表中的功能也失效，（相當于頁面變成了一個純靜態頁面，沒有js了）這個問題不是很明白，有知道的可以幫忙解決一下啦
第二種方法，我看網上有說用jqprint插件的（http://www.jq22.com/jquery-in...），這個我也沒有詳細的看，只是稍微試了一下，也是不能獲取到input的值，而且隱藏的div也一并給顯示出來的了，效果不好，有會的可以指教一下啊。

GPU云服務器云服務器 javascript獲取內容局部打印 html實現局部頁面獲取看見的內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92270.html

JavaScript深入之詞法作用域和動態作用域

摘要：作用域作用域是指程序源代碼中定義變量的區域。采用詞法作用域，也就是靜態作用域。而與詞法作用域相對的是動態作用域，函數的作用域是在函數調用的時候才決定的。前面我們已經說了，采用的是靜態作用域，所以這個例子的結果是。 JavaScript深入系列的第二篇，JavaScript采用詞法作用域，什么語言采用了動態作用域？兩者的區別又是什么？還有一個略難的思考題，快來看看吧。作用域作用域是指...

gclove 2019-08-20 15:37 評論0 收藏0
JavaScript中詞法作用域、閉包與跳出閉包

摘要：是典型的詞法作用域的語言，即一個符號參照到語境中符號名字出現的地方，局部變量缺省有著詞法作用域。沒有任何自己的局部變量，然而它可以訪問到外部函數的變量，即可以使用父函數中聲明的變量。通常，函數中的局部變量僅在函數的執行期間可用。本文從屬于筆者的JavaScript 入門與最佳實踐系列文章，同時，本部分內容也歸納于筆者的我的校招準備之路:從Web前端到服務端應用架構這篇綜述。大部分...

lykops 2019-08-20 10:23 評論0 收藏0
函數基本概念

摘要：返回相加的和永遠也不會執行函數參數聲明函數時沒有給參數，但調用函數時會傳參。當網頁在全局作用域中調用函數時，這個對象引用的就是。函數通過函數可以封裝任意多條語句，可以在任何地方，任何時候調用執行。每個函數都是function類型的實例，和其他引用類型一樣具有屬性和方法。把函數保存為對象中的一個屬性時，該屬性稱之為方法。函數聲明語法方式普通聲明方式 function sum ()...

Lycheeee 2019-08-22 16:33 評論0 收藏0
深入學習js之——詞法作用域和動態作用域

摘要：在中的應用采用詞法作用域，也就是靜態作用域。那什么又是詞法作用域或者靜態作用域呢請繼續往下看靜態作用域與動態作用域因為采用的是詞法作用域函數的作用域在函數定義的時候就決定了。開篇當我們在開始學習任何一門語言的時候，都會接觸到變量的概念，變量的出現其實是為了解決一個問題，為的是存儲某些值，進而，存儲某些值的目的是為了在之后對這個值進行訪問或者修改，正是這種存儲和訪問變量的能力將狀態給...

shiweifu 2019-08-23 15:06 評論0 收藏0
簡析前端學習python3的基礎

摘要：元組是靜態數組，它們不可變，且其內部數據一旦創建便無法改變。元組緩存于運行時環境，這意味著我們每次使用元組時無須訪問內核去分配內存。以下是整理的JavaScript和python的基礎區別的整理：字符串、列表、元組、字典、集合、函數字符串聲明一個字符串 python str = 123 str = 123 Tips: 如果是三個引號的話，那么在py中就是注釋的意思 ...

summerpxy 2019-08-26 13:34 評論0 收藏0