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

【问题标题】：how to create a print modal using javascript, jquery etc如何使用 javascript、jquery 等创建打印模式
【发布时间】：2011-10-02 01:52:50
【问题描述】：

假设我在几页上有一个打印按钮，并且每当用户单击时。它将以模式弹出内容并可以从那里打印。任何想法将不胜感激。

我有几页带有打印按钮。当用户单击时，它需要在模态中提取该内容，而不是从该模态中打印。

【问题讨论】：

Print the contents of a DIV的可能重复
另见：stackoverflow.com/questions/2603465/…
@Brock Adams 谢谢！但我的要求有点不同......但是那个链接很有帮助......我要添加我的代码......

标签： javascript jquery printing

【解决方案1】：

我现在不能为你编写代码，但我可以让你走上正轨..

您需要使用 jquery 来获取要打印的内容（可能是$('body').html();），然后创建模态 div 弹出窗口并将 iframe 添加到模态 div 中。然后将打印内容添加到 iframe 正文（通过$('iframe').document.body.append();）。然后，在 iframe 上调用print ($('iframe').window.print;)

让我知道这是否有意义？

编辑：以下是一些示例代码，可以满足您的需求。（确保在此 javascript 代码之前包含 jquery）

    <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>

jsfiddle:http://jsfiddle.net/tsdexter/ke2rqt97/

【讨论】：