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

Question

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

假设我在几页和每当用户点击时都有一个打印按钮.它将以模态弹出内容,并可以从那里打印.任何想法将不胜感激.

我有几页打印按钮.当用户点击它时,需要在模态中输出内容而不是从该模态打印.

Answer 1

我现在不能为你编写代码,但我可以把你带到正确的轨道上..

你需要使用jquery来获取你想要打印的内容(可能$('body').html();),然后创建你的模态div弹出窗口并在模态div中添加一个iframe.然后添加到iframes主体(通过$('iframe').document.body.append();)打印内容.然后,调用printiframe($('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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	14 年，8 月前
查看次数：	10612 次
最近记录：	8 年，6 月前