HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能，因为我们的项目采用的是HTML的Table方式实现的表格，所以符合javascript中的window.print，了解了下window.print()函数的使用方式。

window.print():用来打印window.document.body.innerHTML下的所有元素内容，所有的显示（display：不为none的元素）;

1. 尝试打印

了解的window.print()方法，尝试在页面中添加一个按钮来触发打印页面中的表格内容，结果不是很理想，发现在Table中所使用到的Css样式都丢失掉了，主要丢失的还是设置的背景色(background-color)，所以有了解HTML 引用Style的media的使用。

2. HTML中的Style

在HTML的Style元素中存在着Media这样一个属性，用来指定设置的CSS样式或外部样式文件应用到目标媒介，其中的设置值有：

screen	计算机屏幕（默认值）。
tty	电传打字机以及使用等宽字符网格的类似媒介。
tv	电视类型设备（低分辨率、有限的屏幕翻滚能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限的带宽）。
print	打印预览模式 / 打印页。
braille	盲人用点字法反馈设备。
aural	语音合成器。
all	适合所有设备。

按照上面的描述将我们项目中的样式，设置了media为print，然后尝试打印，结果还是没有存在背景色，接着，资料搜索......

3. 设置IE浏览器的打印设置

通过微软的官方帮助网站http://support.microsoft.com/kb/296326/en-us 了解到如果要在浏览器上打印出Css样式需要设置浏览器中的配置。

IE8：internet选项 - 高级 - 设置 - 打印 - 打印背景色和图像将复选框选中

IE11：较高版本的浏览器的设置已经改变到 文件 - 页面设置 - 纸张选项 - 打印背景色和图像

设置完成后重新打印报表，结果是预期的报表了。

通过验证：Style中的media标签只是指定在什么设备上显示Css样式，并不能直接显示成预期效果，需要设置浏览器的配置才可完成。IE及360浏览器已经验证可以正常打印了