Question

我有一个HTML页面，该页面以以下方式放置使用JPGraph动态创建的多个图像：

87
102
23

当我尝试使用JavaScript window.print函数和CTRL + P来打印出页面时，就会出现问题。似乎它不会打印出超过一页的内容，而只会滚动显示当前帧条位于该页面的末尾。我发现我可能需要在css文件中添加@media打印，但这似乎对打印没有影响。我将以下内容添加到css文件中：

 <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
        <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
            <form  id ="target">
                Start Date:
                    <input type ="date" name ="startDate" value="2012-01-04"/>
                 <p> </p>
                 End Date: &nbsp
                    <input type ="date" name ="endDate" value= <?php echo date('Y-m-d'); ?> >
                <br>
                <br>
                Report Type
                <br>
                    &nbsp<input type="checkbox" name = "session" value="session"> Longest Sessions
                <br>
                    &nbsp<input type="checkbox" name = "export" value="export"> Export Data
                <br>
                    &nbsp<input type="checkbox" name = "format" value="format"> Format Data
                <br>
                    &nbsp<input type="checkbox" name = "scan" value="scan"> Scan Data
                <br>
                <br>
                 <input type="submit" name="submit" value="Search"/>
                <input type="button" value = "Print" onclick="window.print();return false;"/>
            </form>
<script>
                $(document).ready(function (e) {
                    $("#target").submit(function (e) {
                        e.preventDefault();
                        var form_data = new FormData(this);
                        $.ajax({
                            url: "DrawGraphs.php", // Url to which the request is send
                            type: "post",             // Type of request to be send, called as method
                            data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false,       // The content type used when sending data to the server.
                            cache: false,             // To unable request pages to be cached
                            processData: false,        // To send DOMDocument or non processed data file it is set to false
                            dataType: "json",
                            success: function (data)   // A function to be called if request succeeds
                            {
                                document.getElementById("graphs").innerHTML = "";
                                console.log( 'ready!' );
                                //var myImages = '';
                                for(var image in data) {
                                    $("#graphs").append('<img src="data:image/png;base64,' + data[image]+ '"/>'+);
                                     //myImages += '<img src="data:image/png;base64,' + data[image]+ '"/>';

                                };
                                //$("#graphs").html(myImages);
                            },error:function(XMLHttpRequest, textStatus, errorThrown){
                                console.log(XMLHttpRequest);
                                console.log(errorThrown );
                            }
                        });
                    });
                });

            </script>

<main class="mdl-layout__content mdl-color--grey-100">
    <div class = "mdl-js-layout">
        <div id = "graphs" class="mdl-grid demo-content">
         <p>Select the types of report and the date range to search.</p>
        </div>
    </div>
</main>
</div>

我不太了解如何在CSS中定义打印方式和内容，因此，如果有人可以将我指向正确的方向，将不胜感激。预先感谢。

CTRL + P打印不超过一页

0 个答案: