admin管理员组文章数量:1530875
Lodop打印控件
简述：
是可以实现个性化打印功能的控件，项目中指定某些区域进行一些特殊打印要求时使用该控件比较友好
优点：
- 功能丰富： 允许进行高度自定义的打印操作，添加图像、设置纸张尺寸控制打印机的设置等
- HTML 内容支持：支持添加 HTML 内容到打印任务中，可以灵活地处理复杂的格式和布局需求
- 对象风格控制：可以为设置字体样式、边框样式等，从而实现个性化的打印效果
- 灵活的打印设置：提供了丰富的打印设置选项，可以控制页眉页脚，调整打印份数等
- 跨浏览器兼容性：支持多种浏览器，包括 Internet Explorer、Chrome、Firefox 等
1. 安装
官网地址：https://www.lodop/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自动换行分页会出现无法补全表头和结尾表格线
网址：
CSS3/CSS2/CSS 属性速查表：http://www.w3chtml/css3/properties/
can i use网站（CSS、JS兼容性自查工具）：https://caniuse/
Lodop常见问题及解答：https://www.lodop/problem.html
版权声明：本文标题：Lodop打印控件保姆级入门 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1724843226a993482.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论