Lodop打印控件保姆级入门

钱多多810

已于 2024-04-25 14:22:45 修改

阅读量368

点赞数 3

文章标签： javascript 前端 vue.js

于 2024-04-25 14:12:10 首次发布

本文链接：https://blog.csdn.net/weixin_55977434/article/details/138187939

版权

Lodop打印控件

简述：

是可以实现个性化打印功能的控件，项目中指定某些区域进行一些特殊打印要求时使用该控件比较友好

优点：

功能丰富：允许进行高度自定义的打印操作，添加图像、设置纸张尺寸控制打印机的设置等
HTML 内容支持：支持添加 HTML 内容到打印任务中，可以灵活地处理复杂的格式和布局需求
对象风格控制：可以为设置字体样式、边框样式等，从而实现个性化的打印效果
灵活的打印设置：提供了丰富的打印设置选项，可以控制页眉页脚，调整打印份数等
跨浏览器兼容性：支持多种浏览器，包括 Internet Explorer、Chrome、Firefox 等

1. 安装

官网地址：https://www.lodop.net/download.html

先去Lodop官网下载相应的安装包
解压安装后将LodopFuncs.js放在项目中

2. 使用

首先一定要在需要使用的页面中注册引入进去

import { getLodop } from "@/plugins/LodopFuncs";

在方法里直接创建对象使用即可

    lodopPrint() {
      let LODOP = getLodop()
      // 为null时说明没获取到，没有安装或者启动插件都会导致该情况
      if (LODOP == null) return console.log('没安装或者没启动')
      // 获取表格打印内容（通过id获取节点）
      const printHtml = document.getElementById('printTable').innerHTML
      // 打印初始化数据
      LODOP.PRINT_INITA(0, 0, "297mm", "210mm", '表格打印测试')  // 打印初始化
      LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')  // 设置纸张大小
      LODOP.SET_SHOW_MODE('NP_NO_RESULT', true)  // 设置显示模式
      LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)
      // 表格打印设置（包括边距设置）
      LODOP.ADD_PRINT_TABLE('10mm', '6mm', 'RightMargin:20mm', '85%', printHtml)
      LODOP.PREVIEW() // 预览（预览页面可以进行下载）
    },

常用API：

函数	描述	特点
PRINT_INIT	打印初始化
ADD_PRINT_TEXT	增加纯文本打印项
ADD_PRINT_HTM	增加超文本打印项(普通模式)	切行不切字，按照打印页的高度进行分页，嵌套复杂等表格不行
ADD_PRINT_HTML	增加超文本打印项(图形模式)	切行切字，完全按照打印设计的高度分页，会出现文字被截成一半的情况，类似于截图
ADD_PRINT_TABLE	增加表格打印项（超文本模式）	不切行，打印表格。只能打印一个表格，嵌套复杂的行跨页了会隐藏后面的内容，不会分到下一页，会出现文字被截成一半的情况。

3. 注意事项

Vue文件不能使用饿了么组件
css样式不允许放在style scoped里，可以放在行内或者样式拼接
样式要使用css2的，最好套官方模板使用
使用其打印表格时要画标准表格，否则会出现不兼容情况
不同浏览器展示效果也可能会出现差距。例如：linux和windows可能会出现效果不同，linux使用ADD_PRINT_TABLE自动换行分页会出现无法补全表头和结尾表格线

在这里插入图片描述