成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 實(shí)現(xiàn)局部打印（動態(tài)獲取的內(nèi)容）

MingjunYang / 3085人閱讀

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

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

        var bodyHtml = window.document.body.innerHTML;
        window.document.body.innerHTML = html;//html為當(dāng)前顯示的div的內(nèi)容
        window.print();
        window.document.body.innerHTML = bodyHtml;

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

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

        printHtml(html);
    }
    //將表單中手動填寫的數(shù)據(jù)進(jìn)行綁定，便于html()的時(shí)候獲取到  
    function bindData(modalID) {
        //type=text,type=number, 同時(shí)如果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 選中狀態(tài)  
        $(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 () {//關(guān)閉模態(tài)框的遮罩層
        //    $(this).removeClass("in");
        //});
    }

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92270.html

相關(guān)文章

  • JavaScript深入之詞法作用域和動態(tài)作用域

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

    gclove 評論0 收藏0

  • JavaScript中詞法作用域、閉包與跳出閉包

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

    lykops 評論0 收藏0

  • 函數(shù)基本概念

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

    Lycheeee 評論0 收藏0

  • 深入學(xué)習(xí)js之——詞法作用域和動態(tài)作用域

    摘要：在中的應(yīng)用采用詞法作用域，也就是靜態(tài)作用域。那什么又是詞法作用域或者靜態(tài)作用域呢請繼續(xù)往下看靜態(tài)作用域與動態(tài)作用域因?yàn)椴捎玫氖窃~法作用域函數(shù)的作用域在函數(shù)定義的時(shí)候就決定了。 開篇 當(dāng)我們在開始學(xué)習(xí)任何一門語言的時(shí)候，都會接觸到變量的概念，變量的出現(xiàn)其實(shí)是為了解決一個(gè)問題，為的是存儲某些值，進(jìn)而，存儲某些值的目的是為了在之后對這個(gè)值進(jìn)行訪問或者修改，正是這種存儲和訪問變量的能力將狀態(tài)給...

    shiweifu 評論0 收藏0

  • 簡析前端學(xué)習(xí)python3的基礎(chǔ)

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

    summerpxy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<