Question

我目前正致力于在div中打印内容。目前我正在使用此approach。如果div小于屏幕，这可以正常工作。我的问题是，我需要打印（报告）的div是正常屏幕高度的两倍或三倍。

当我点击控制+ P时，我只能看到屏幕上只捕获的内容。

Answer 1

使用打印查询怎么样？

@media print {
  .selector{
    /*some css*/
  }
}

您可以使用此功能并在打印过程中重新排列div的内容

Answer 2

以下是示例代码示例，希望它能为您提供帮助。如果您需要额外的东西，请随意发表评论。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

使用javascript打印DIV的内容

2 个答案: