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

叁歲伎倆 2022-09-04 08:53 18阅读 0赞

# 项目背景 #

本文是使用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内核）等多端进行打印测试；

# 注意事项 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzOTI5NDIw_size_16_color_FFFFFF_t_70]

# 结尾 #

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzOTI5NDIw_size_16_color_FFFFFF_t_70]: /images/20220829/95cd0f72f28a43029a37c563e00e8ec8.png