Javascript 打印弹出模式窗口的内容_Javascript_Jquery_Html

Javascript 打印弹出模式窗口的内容

javascript jquery html

Javascript 打印弹出模式窗口的内容,javascript,jquery,html,Javascript,Jquery,Html,我想打印一个弹出模式窗口的内容，而不是在主页上打印其他内容我尝试链接弹出窗口上的一个按钮来运行命令窗口。print（）；但这只是打印一张空白页。我假设这是因为我没有实际调用要打印的主要内容，但它们是javascript的，我根本不知道怎么做有人知道我怎么只能打印弹出窗口的内容吗？谢谢打印按钮在这里 × 这就是我要打印的内容 $（文档）。在（'单击'，'上。计划模式'，函数（）{ $（'.modal-title_logindetail'）.html（“”）； $（'.modal-ti

我想打印一个弹出模式窗口的内容，而不是在主页上打印其他内容

我尝试链接弹出窗口上的一个按钮来运行命令窗口。print（）；但这只是打印一张空白页。我假设这是因为我没有实际调用要打印的主要内容，但它们是javascript的，我根本不知道怎么做

有人知道我怎么只能打印弹出窗口的内容吗？谢谢

打印按钮在这里

×

这就是我要打印的内容

$（文档）。在（'单击'，'上。计划模式'，函数（）{
$（'.modal-title_logindetail'）.html（“”）；
$（'.modal-title_logindetail'）.html（“”）；
var base_url=''；
var student_id=“”；
var student_first_name=''；
var student_last_name=''；
$.ajax({
类型：“post”，
url:base_url+“学生/getlogindetail”，
数据：{'student\u id'：student\u id}，
数据类型：“json”，
成功：功能（响应）{
var数据=”；
数据+=''；
数据+=''；
数据+='”+学生名+''+学生姓+”'；
数据+=''；
数据+=''；
数据+=''；
数据+=''++''；
数据+=''++''；
数据+=''++''；
数据+=''；
数据+=''；
数据+=''；
$。每个（响应、功能（i、obj）{
数据+=''；
数据+=''+第一个案例（对象角色）+''；
数据+=''；
数据+=''+对象用户名+''；
数据+=''+对象密码+''；
数据+=''；
});
数据+=''；
数据+=''；
数据+='+'+':'+base_url+'站点/用户登录'；
数据+=''；
数据+=''；
$（'.modal-body_logindetail'）.html（数据）；
$（“#ScheduleModel”）.model（'show'）；
}
});
});
函数firstToUpperCase（str）{
返回str.substr（0,1）.toUpperCase（）+str.substr（1）；
}


功能打印区域2（区域ID）{
var printContent=document.getElementById（“printarea2”）；
var WinPrint=window.open（''，''，宽度=1100，高度=650'）；
WinPrint.document.write（printContent.innerHTML）；
WinPrint.document.close（）；
WinPrint.focus（）；
print.print（）；
WinPrint.close（）；
}

假设您希望使用类打印div

$（“.modal-title\u logindeail”）

将“打印”按钮更改为

试试这个

 function printArea2() {
        var contents = document.getElementsByClassName("modal-title_logindetail").innerHTML;
        var frame1 = document.createElement('iframe');
        frame1.name = "frame1";
        frame1.style.position = "absolute";
        frame1.style.top = "-1000000px";
        document.body.appendChild(frame1);
        var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
        frameDoc.document.open();
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            document.body.removeChild(frame1);
        }, 500);
        return false;
    }

函数打印区域2（）{
var contents=document.getElementsByClassName（“modal-title\u logindeail”）.innerHTML；
var frame1=document.createElement（'iframe'）；
frame1.name=“frame1”；
frame1.style.position=“绝对”；
frame1.style.top=“-1000000px”；
document.body.appendChild（frame1）；
var frameDoc=frame1.contentWindow？frame1.contentWindow:frame1.contentDocument.document？frame1.contentDocument.document:frame1.contentDocument；
frameDoc.document.open（）；
frameDoc.document.write（'DIV Contents'）；
frameDoc.document.write（“”）；
frameDoc.document.write（内容）；
frameDoc.document.write（“”）；
frameDoc.document.close（）；
setTimeout（函数（）{
window.frames[“frame1”].focus（）；
window.frames[“frame1”].print（）；
document.body.removeChild（frame1）；
}, 500);
返回false；
}

您是否尝试过使用CSS隐藏不想打印的内容？您可以在CSS中使用

@media print{}

来完成此操作。单击“打印”按钮时，会显示一个空白页。我想要的是打印javascript元素，我不知道如何打印。当我单击“打印”按钮时，会显示一个空白页。我想要的是打印javascript元素，我不知道如何打印。

onclick=“printArea2（'printableArea'）

没有id为printableArea的元素。您的代码指的是打印id为printArea2的div，它有打印按钮。是否要打印$（'.modal-title\u logindeail'）的内容？？？

    $(document).on('click', '.schedule_modal', function () {
        $('.modal-title_logindetail').html("");
        $('.modal-title_logindetail').html("<?php echo $this->lang->line('login_details'); ?>");
        var base_url = '<?php echo base_url() ?>';
        var student_id = '<?php echo $student["id"] ?>';
        var student_first_name = '<?php echo $student["firstname"] ?>';
        var student_last_name = '<?php echo $student["lastname"] ?>';
        $.ajax({
            type: "post",
            url: base_url + "student/getlogindetail",
            data: {'student_id': student_id},
            dataType: "json",
            success: function (response) {
                var data = "";
                data += '<div class="col-md-12">';
                data += '<div class="table-responsive">';
                data += '<p class="lead text text-center" style="font-size:60px;">' + student_first_name + ' ' + student_last_name + '</p>';
                data += '<table class="table table-hover">';
                data += '<thead>';
                data += '<tr>';
                data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('user_type'); ?>" + '</th>';
                data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('username'); ?>" + '</th>';
                data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('password'); ?>" + '</th>';
                data += '</tr>';
                data += '</thead>';
                data += '<tbody>';
                $.each(response, function (i, obj) {
                    data += '<tr>';
                    data += '<td class="text text-center" style="font-size:30px;"><b>' + firstToUpperCase(obj.role) + '</b></td>';
                    data += '<input type=hidden name=userid id=userid value=' + obj.id + '>';
                    data += '<td class="text text-center" style="font-size:30px;">' + obj.username + '</td> ';
                    data += '<td class="text text-center" style="font-size:30px;">' + obj.password + '</td> ';
                    data += '</tr>';
                });
                data += '</tbody>';
                data += '</table>';
                data += '<b class="lead text text-danger" style="font-size:20px;"> ' + "<?php echo $this->lang->line('login_url'); ?>" + ': ' + base_url + 'site/userlogin</b>';              
                data += '</div>  ';
                data += '</div>  ';
                $('.modal-body_logindetail').html(data);
                $("#scheduleModal").modal('show');
            }
        });
    });

    function firstToUpperCase(str) {
        return str.substr(0, 1).toUpperCase() + str.substr(1);
    }
</script>

<script>
function printArea2(areaID) {
var printContent = document.getElementById("printarea2");
var WinPrint = window.open('', '', 'width=1100,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

 function printArea2() {
        var contents = document.getElementsByClassName("modal-title_logindetail").innerHTML;
        var frame1 = document.createElement('iframe');
        frame1.name = "frame1";
        frame1.style.position = "absolute";
        frame1.style.top = "-1000000px";
        document.body.appendChild(frame1);
        var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
        frameDoc.document.open();
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            document.body.removeChild(frame1);
        }, 500);
        return false;
    }