Question

我在使用bootstrap打印打印数量超过53的预标签时遇到困难，我总是在打印预览中获得空白页面。但是，如果记录小于52，那么我可以成功打印。请参阅下面的代码。

<html ng-app="appMain">
<head>
    <script src="lib/angular.js"></script>
    <script src="lib/moment.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css?v3.3">
</head>
<body>
    <div ng-controller='ctrlMain'>            
        <table>
            <tr>                
                <td><button ng-click="fnPrintXMLData()"> Print </button></td>
            </tr>
        <table>
        <label>test label</label>
        <div class="clearfix">&nbsp;</div>                           
        <span ng-show="message.id"><h4>Detail Message</h4></span>
        <div class="clearfix">&nbsp;</div>
        <pre class="printDisplayBox" style="white-space: pre-wrap; word-break: normal;">
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        </pre>
    </div>
</body>

并在控制器中

appMain.controller('ctrlMain', ['$scope', function($scope) {
$scope.fnPrintXMLData = function() {
    window.print();
};}]);

我打印的结果是这样的： Printing with bootstrap 如果我注释掉“”或记录计数小于52，那么结果是正常的 Printing without bootstrap

有人可以帮我这个吗？非常感谢。

Answer 1

你的HTML：

<pre class="printDisplayBox" style="white-space: pre-wrap;word-break: normal;width: 100%;display: -webkit-inline-box !important;">

如果使用bootstrap，HTML pre标签打印额外的行

1 个答案: