如何使用javascript、jquery等创建打印模式_Javascript_Jquery_Printing

如何使用javascript、jquery等创建打印模式

javascript jquery printing

如何使用javascript、jquery等创建打印模式,javascript,jquery,printing,Javascript,Jquery,Printing,假设我在几页上有一个打印按钮，每当用户点击时。它将弹出一个模式的内容，并可以从那里打印。任何想法都将受到赞赏我有几页有打印按钮。当用户点击它时，需要在一个模式中pul该内容，然后从该模式打印。我现在无法为您编写代码，但我可以让您进入正确的轨道您需要使用jquery获取要打印的内容（可能是$（'body'）.html（）；），然后创建模态div弹出窗口并将iframe添加到模态div中。然后将打印内容添加到iframes体中（通过$（'iframe'）.document.body.appen

假设我在几页上有一个打印按钮，每当用户点击时。它将弹出一个模式的内容，并可以从那里打印。任何想法都将受到赞赏

我有几页有打印按钮。当用户点击它时，需要在一个模式中pul该内容，然后从该模式打印。

我现在无法为您编写代码，但我可以让您进入正确的轨道

您需要使用jquery获取要打印的内容（可能是

$（'body'）.html（）；

），然后创建模态div弹出窗口并将iframe添加到模态div中。然后将打印内容添加到iframes体中（通过

$（'iframe'）.document.body.append（）；

）。然后，在iframe（

$（'iframe'）.window.print；

）上调用

print

）

让我知道这是否有意义

编辑：下面是一些示例代码，我相信您需要这些代码。（确保在此javascript代码之前包含jquery）


$（文档）.ready（函数（）{
$（'#printmodel'）。单击（函数（）{
//变数
var contents=$（'#可打印'）.html（）；
var frame=$（'#printframe'）[0].contentWindow.document；
//显示模态div
$（'#modal'）.css（{'display'：'block'}）；
//打开框架文档并添加内容
frame.open（）；
框架。写入（内容）；
frame.close（）；
//只打印模态div
$（'#printframe'）[0].contentWindow.print（）；
});
});
#模态{
显示：无；
宽度：100px；
高度：100px；
保证金：0自动；
位置：相对位置；
顶部：100px；
}
这是
可打印

jsFIDLE:

可能与See重复，另外：@Brock Adams谢谢！但我的要求有点不同…但那个链接很有用…我要添加我的代码。。。

    <body>
        <script>
        $(document).ready(function(){
            $('#printmodal').click(function(){

                // variables
                var contents = $('#printable').html();
                var frame = $('#printframe')[0].contentWindow.document;

                // show the modal div
                $('#modal').css({'display':'block'});

                // open the frame document and add the contents
                frame.open();
                frame.write(contents);
                frame.close();

                // print just the modal div
                $('#printframe')[0].contentWindow.print();
            });
        });
        </script>
        <style>
            #modal {
                display: none;
                width: 100px;
                height: 100px;
                margin: 0 auto;
                position: relative;
                top: 100px;
            }
        </style>

        <!-- Printable div (or you can just use any element) -->
        <div id="printable">
            <p>This is</p>
            <p>printable</p>
        </div>

        <!-- Print link -->
        <a id="printmodal" href="#">Print Me</a>

        <!-- Modal div (intially hidden) -->
        <div id="modal">
            <iframe id="printframe" />  
        </div>
    </body>