我已经为我的应用程序创建了一个图形统计信息。它描述了机器的性能。在浏览器上它看起来像这样。
我在我的 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);
}
});
最佳答案
添加
-webkit-print-color-adjust: exact;
根据您的表格样式。
注意:这是特定于 vendor (即 Chrome)的属性，使用多个版本以匹配其他浏览器。
关于javascript - HTML表格打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29767286/