Lodop和C-Lodop打印控件用vue在win7电脑不兼容样式板式错乱问题

项目背景

本文是使用C-Lodop云打印控件，在使用的过程中，出现在win7电脑不兼容，模板样式错乱情况。
这里先简单介绍下C-Lodop:

• 有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来；
• 有人说她是打印编程接口，因为她介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到；
• 有人说她是JavaScript的扩展，因为她所有功能就那么几个语句，和JS语法一样，一看就明白个究竟；
• 有人说她是报表打印工具，因为那个add_print_table语句把报表统计的那点事弄了个明明白白；
• 有人说她是条码打印工具，因为用了她再也不用后台生成条码图片了，前端一行指令就动态输出清晰准确的条码，一维二维都行；
• 有人说她是图表打印工具，因为用她能输出几乎能想象的任何图表，虽然没那么豪华，但什么饼图、折线图、柱图甚至复合图等等都不在话下；
• 有人说她是个小玩意，因为她体积太小了，才2M多，她所包含的其中任何一个对照工具都是她的好几倍（例如条码打印控件、图表控件等）；
• 有人说她是套打教案，因为以Lodop+JS实现套打这种模式，在网上已被吵吵为教科书般的解决方案；
• 有人说她是Web打印控件的“终结者”，因为接触“她”后再不想别的“她”；
  综上有点，选择了C-Lodop了

问题

遇到一个问题，打印模板经过测试人员、各类打印机都是正常，但是出现这种情况，在部分win7的电脑上模板样式出现错乱问题。。。

排查思路/分析

1. 准备win7电脑和出现问题打印机型号，准备复现问题，但是依旧正常；
2. 使用出现问题的浏览器（360浏览器）打印依旧正常，让客户使用谷歌浏览器操作，问题依旧存在;
3. 使用win7 64位于32位分别测试模板打印，依旧正常；
4. 查看C-Lodop版本是否一致，C-Lodop -->C-Lodop Setup -->关于，一致并未发现问题；
5. 寻找是否是模板html的问题，发现模板使用flex布局，模板出问题的样式刚好和flex布局有关；

验证问题

flex布局导致？

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。但是目前，它只支持IE10 +，但是我使用的360浏览器是谷歌内核的呀，为什么会导致flex布局失效呢?
这是我怀疑起了C-Lodop这个打印控件，查看该官网发现，Lodop调用ie引擎进行解析超文本，但是客户端ie版本可能不同，或ie本身存在问题，都会影响解析后的样式是，升级ie浏览器

这时候我远程用户出现问题的电脑，发现电脑自带的IE是 IE8（这里注意无论你是用什么浏览器进行页面打印，Lodop/C-Lodop都会调取本机自带的IE最高版本引擎去渲染模板），我们用来测试的win7电脑自带的IE版本士IE11,这时候问题浮现了。原来是Lodop和c-Lodop调用的是本机IE引擎进行模板的html渲染，并不是不兼容win7，只是IE版本过低导致flex布局失效，出现样式问题。

解决方案

1. 对打印的html模板，写html和css的时候要注意IE的兼容性，进行IE7+全部兼容，打印膜版避免使用flex布局、
2. 模板修改完成后，对WIN10 和win7（IE8内核）等多端进行打印测试；

注意事项

结尾

如有疑问，可在下方留言，会第一时间进行回复

谢谢你愿意花时间阅读这篇文章，希望可以对你有所帮助！

只要有树叶飞舞的地方,火就会燃烧,火的影子照耀着村子,新的树叶就会发芽