lodop打印不显示页码_Vue 集成报表工具Lodop

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

文章后面还会结合 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 */

3. Lodop的使用例子

总的来说, 使用Lodop打印大致分为下面几个步骤。

1. 创建打印任务：设置一些纸张大小啊，任务名称等基本参数
2. 生成打印内容: 打印的内容有很多种方式

• 打印设计： 官网例子 通过Lodop内置的报表设计工具生成的JS片段, 下面也会以这种方式写例子
• 纯Web端打印：官网例子
• 等等

3. 预览或直接打印

3.1 如何引入Lodop的Web Js

import 

3.2 创建打印任务

/**

3.3 生成打印内容

本例子中我们使用Lodop自带的打印设计, 生成一段测试代码

LODOP

这个例子简单的生成了一个文本。

3.4 预览和打印

紧接着最后就可以调用预览或者直接打印的命令

• 预览命令 LODOP.PREVIEW()

预览是会先弹出预览界面, 在这个界面上就可以点击打印等操作

• 直接打印命令 LODOP.PRINT()

3.5 大致的代码

import 

4. Lodop如何实现分页（打印多张）

实现分页的方式很简单, 只需在创建打印内容步骤后面增加 LODOP.NewPage()

/**

这样你可以改造 createContent 函数, 传入数据，到这里进行判断、循环渲染等复杂逻辑，下面是实现伪代码

/**

5. 结合Socket.io、Puppeteer 搭建打印服务( 待完善)

Puppeteer​github.com Socket.io​socket.io Lodop和C-Lodop官网主站​www.lodop.net