Question

我为我的应用程序创建了一个图形统计信息。它描绘了机器的性能。在浏览器上它看起来像这样。

enter image description here

我在MVC应用程序中使用HTML表创建了这个。此数据通过Ajax加载。

问题在于，当我从浏览器进行传统打印时，它在预览中没有显示任何内容。下面是我的表的生成代码（使用css）我可以在浏览器的打印预览中做些什么。

我只是提供了一些用于分析的呈现HTML

<style>
    .istrue {
        background-color:#000000;
        margin:6.5px 0
    }
    .isfalse {
        background-color: #fff;
        margin:6.5px 0;
    }
    .divchart{
       width:auto;
        margin-left:42px;
        border:1px solid #000000;
        height:90%;
        float:none;
        height:90%;
    }
    .divchart div,td{
        height:5px;
    }
</style>
<div class="divchart">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>
                    <div title="Belt #: 1
    Minutes : 0
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 20
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 40
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 60
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 80
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 100
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 120
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 140
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 160
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 180
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 200
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 220
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 240
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 260
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 280
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 300
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 320
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 340
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 360
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 380
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 400
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 420
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 440
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 460
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 480
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 500
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 520
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 540
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 560
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 580
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 600
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 620
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 640
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 660
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 680
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 700
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 720
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 740
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 760
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 780
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 800
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 820
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 840
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 860
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 880
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 900
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 920
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 940
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 960
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 980
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 1000
    State : On"
                        class="istrue">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 1020
    State : Off"
                        class="isfalse">
                    </div>
                </td>
                <td>
                    <div title="Belt #: 1
    Minutes : 1040
    State : Off"
                        class="isfalse">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我想我应该提到div和表是通过Ajax和JavaScript生成的。

$(function () {
    $.ajax({
        type: "POST",
        url: "/BeltStats/GetData",
        dataType: "json",
        data: JSON.stringify({ 'lineNo': lineno }),
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            var jsOject = jQuery.parseJSON(result.StatsData);                
            PlotData(jsOject.StatsData);
        }
    });
    function PlotData(data) {
        var lineNo = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var lineSeries = [];           
        var strValueTable = "<div class='divchart'><table width='100%' cellpadding='0' cellspacing='0'>";
        $.each(lineNo, function (i, item) {                
            var results = data.filter(function (elem) {
                return elem.LineNo == item;
            });
            if (results.length > 0) {
                strValueTable += "<tr>";

            }
            $.each(results, function (i, itemValue) {
                if (itemValue.Value == 1)
                    strValueTable += "<td><div class='istrue' title='Belt #: " + itemValue.BeltNo + "\nMinutes : " + itemValue.Time + "\nState : On'></div></td>";
                else
                    strValueTable += "<td><div class='isfalse' title='Belt #: " + itemValue.BeltNo + "\nMinutes : " + itemValue.Time + "\nState : Off'></div></td>";
            });
            if (results.length > 0)
                strValueTable += "</tr>";
        });
        strValueTable += "</table></div>";
        $('#chartDiv').html(strValueTable);
    }
});

Answer 1

添加

-webkit-print-color-adjust: exact;

到你的餐桌风格。

注意：这是特定于供应商（即Chrome）的属性，使用多个版本来匹配其他浏览器。

HTML表格打印

1 个答案: