HTML表格打印
我为我的应用程序创建了一个图形统计信息。它描绘了机器的性能。在浏览器上它看起来像这样。
我在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);
}
});
1 个答案:
答案 0 :(得分：0)
添加
-webkit-print-color-adjust: exact;
到你的餐桌风格。
注意：这是特定于供应商（即Chrome）的属性，使用多个版本来匹配其他浏览器。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？