Vue使用lodop实现打印小结

Vue是当前流行的前端开发框架之一，它提供了丰富的功能以帮助开发者快速构建交互式的用户界面。然而，在某些场景下，比如需要生成打印报表时，Vue本身并不能直接提供打印功能。这时候，我们就需要借助第三方插件来实现打印需求。Lodop打印控件和C-Lodop打印服务是两种常用的打印解决方案。 Lodop打印控件本质上是一个浏览器插件，它能够与浏览器紧密结合，提供本地打印功能。Lodop插件支持的浏览器包括IE系列、火狐51版及之前的历史版本、谷歌44版及之前的历史版本。但是，由于浏览器厂商的安全策略更新，新版火狐和谷歌浏览器不再支持NP插件，因此无法使用Lodop插件。这就要求开发者在使用Lodop时，必须考虑到浏览器兼容性问题。 而C-Lodop打印服务的出现，则是在一定程度上解决了上述问题。它是一个以提供服务的方式解决web打印问题，不再依赖于浏览器插件，从而摆脱了对浏览器的依赖。C-Lodop打印服务支持所有浏览器，包括新版谷歌、64位火狐、Edge等不再支持Lodop插件的浏览器。 在Vue项目中使用Lodop或C-Lodop时，需要先将官方提供的LodopFuncs.js文件保存到项目目录下，例如myProject/src/assets/。接下来，需要修改LodopFuncs.js文件，在文件底部添加export {getLodop};代码，以导出getLodop函数。然后在打印事件处理函数中通过import导入getLodop，调用getLodop函数来获取LODOP对象变量。通过PRINT、PREVIEW、PRINT_DESIGN等方法进行打印。 由于C-Lodop可以替代Lodop，并且支持所有浏览器，因此在实际开发中可以直接使用C-Lodop来完成打印需求。引入element组件后，通过编写相应的Vue模板代码，并使用getLodop方法来实现打印功能。在具体实现中，需要注意的是，可以通过document.getElementById('tableId').innerHTML来获取页面元素的HTML内容进行打印。 当需要向用户呈现打印服务的提示时，可以利用element-ui中的MessageBox组件进行弹窗提示。此外，项目中还需要动态加载C-Lodop云打印所需的CLodopfuncs.js文件，可以通过创建script标签动态引入脚本文件到页面中。 在实际打印前，通常需要根据项目需求判断用户是否已安装打印服务。若未安装，将提示用户进行下载安装；若已安装，则直接进行打印样式等的设置。在进行打印设置时，用户可以根据官方文档来设置打印样式、字体大小和版面布局等。 在使用C-Lodop时，还需要考虑不同浏览器对于端口的占用情况，因此在加载文件时需要考虑双端口8000和18000同时使用，以避免单个端口被占用的问题。可以通过创建script标签并设置src属性的方式，来实现页面动态加载C-Lodop云打印所需的文件。 最终，实际使用时，可以通过编写Vue组件和方法，结合LodopFuncs.js中的getLodop函数，来调用LODOP对象的各种方法进行打印。例如，可以使用ADD_PRINT_TEXT添加文本内容到打印队列，用PRINT_INIT和PREVIEW方法来初始化打印并进行预览。在编写这些方法时，开发者需要参考Lodop或C-Lodop的官方文档，了解不同方法的具体使用方式和参数设置。