IE打印A4，表格缩小问题剖析

IE打印缩小问题剖析

1. 问题描述

   IE浏览器下打印一定宽度的表格，用打印机打印出的A4纸上的表格宽比浏览器中呈现的表格宽高要小，而非IE浏览器打印相同表格正常显示。

2. 确定原因

2.1 排除法

   排除是否由于IE浏览器的打印设置错误造成问题，检查打印设置步骤如下：

   点击IE浏览器右上方设置icon-打印-页面设置，出现对话框（图1）。

（图1）

   检查结果发现，打印设置无问题。

2.2 观察+假设+验证

   仔细观察IE打印出的表格预览发现，宽度高度，字体大小都比正常情况下缩小了一定比例（图2），猜想IE内部的某些机制会在打印表格时对样式表中的数字进行等比例缩小。

    

（图2）

验证猜想，将原有样式表中的宽度由750变成1070，打印预览发现宽度可以正常显示了（图3），但是字体和行高与图2比较没有任何变化。

（图3）

进一步验证，将原有样式表中的宽度由750变成1070，字体由13变成18，行高由20变成30，打印预览（图4）发现宽高和字体与（图2）比较都变大了，并且接近其他浏览器打印出的正常情况。

（图4）

2.3 结论

   IE浏览器内部某些机制在执行打印操作时，会等比例缩小读取到的样式（这里的样式是指用数字控制的样式，比如宽高、行高等），切计算得出缩小比例大约为0.7，即：IE打印表现 = 页面表现 * 0.7 。

3. 解决方案 

3.1 解决思路

    根据产生问题的原因，可以确定只要在IE浏览器打印的情况下，将原有样式中的数字全都扩大一定比例就能保证IE打印出表现与页面表现保持一致。而在其他浏览器打印时保持原有样式不变。

3.2 实际操作

    经过对printThis.js插件的深入研读分析，发现插件本身提供了“控制打印样式”的配置，即

以上三种配置都是加载打印控制样式，所不同的是，importCSS和loadCSS是引入外部样式，即通过link标签或者路径去实现外部引入样式，其实两者最后都是拼成link标签插入到新生成的打印代码的head中，外部引入的方式适用于样式代码过多的情况，importStyle是内部写入样式，即通过style标签直接写importStyle：后面，内部写入样式适用于样式代码较少的情况。所以根据实际情况我们选择了外部加载的方式，即：loadCSS引入forieprint.css文件。

我们在新的文件中重新定义打印表格的宽度、行高、字号，最终实现了项目目标。