JavaScript 实现局部打印（动态获取的内容）

MingjunYang 发布于2019-08-22 11:22 / 3083人阅读

摘要：第一次写打印，只知道，可是直接出来的是当前页面的所有内容，而我要做的是打印当前模态框里展示的内容。怎么办，接着搜呗。

第一次写打印，只知道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实现局部页面获取看见的内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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