fastreport 打印多张报表_Vue 集成报表工具Lodop

Lodop是一款web端的报表打印控件, 可以在web端调用诸多跟打印相关的设置及功能，通过它我们可以在web端实现报表设计、打印，获取打印机状态、可用打印机等等功能

这个方案有以下特点：

1. 快速设计各种复杂的单据

2. 通过js控制，可实现复杂逻辑的打印处理

3. 兼容多端：小程序、原生App、H5

4. 可预览或直接静默式打印

5. 兼容多种打印机，便携式打印、桌面设计打印

...等等

下一篇文章还会结合 Socket.io、Puppeteer 来实现一个打印服务, 供微信小程序、H5端进行报表打印、获取打印机实时状态等功能。

1. Lodop的安装

Lodop的web端控件使用原理, 是通过本地服务提供的Api接口,来调用打印机相关的一些服务，因而需要在本地安装一个Lodop服务

2. Vue项目中引入Lodop的Web Js来调用Lodop服务

由于Vue项目的Js引入是基于ES6的, 所以我们将Lodop的web js改造下, 使其支持通过 import的方式引入

同时还删减掉了一些没必要的提示, 请根据实际情况保留

/* eslint-disable no-unused-vars */// ==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState// ==判断是否需要CLodop(那些不支持插件的浏览器):==function needCLodop() {try {var ua = navigator.userAgentif (ua.match(/WindowssPhone/i)) { return true }if (ua.match(/iPhone|iPod|iPad/i)) { return true }if (ua.match(/Android/i)) { return true }if (ua.match(/EdgeD?d+/i)) { return true }var verTrident = ua.match(/TridentD?d+/i)var verIE = ua.match(/MSIED?d+/i)var verOPR = ua.match(/OPRD?d+/i)var verFF = ua.match(/FirefoxD?d+/i)var x64 = ua.match(/x64/i)if ((!verTrident) && (!verIE) && (x64)) { return true } else if (verFF) {verFF = verFF[0].match(/d+/)if ((verFF[0] >= 41) || (x64)) { return true }} else if (verOPR) {verOPR = verOPR[0].match(/d+/)if (verOPR[0] >= 32) { return true }} else if ((!verTrident) && (!verIE)) {var verChrome = ua.match(/ChromeD?d+/i)if (verChrome) {verChrome = verChrome[0].match(/d+/)if (verChrome[0] >= 41) { return true }}}return false} catch (err) {return true}}// ==引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==if (needCLodop()) {var head = document