前言—入职新公司以后 ,领导云淡风轻的说 打印的任务分配给你了 我一口应承下来 结果,,前任员工一堆坑 现任来填坑 一露肚皮深似海 从此打印是路人
言归正传,我们回归到需求本身,先简要说一下我们的需求,如下图
可以看到 要打印表头 表格 和表尾 而且还要做万恶的各种设置 (包含纸张大小 方向 页头页尾 截断还是换行 等等) 根据这些需求 通过代码调整 实现了如下效果
先贴一下用到的LODOP 方法及示意
LODOP = getLodop() // 获取LODOP 对象
LODOP.PRINT_INIT('写入你想说的话') // 打印初始化
LODOP.SET_PRINT_STYLEA(varItemNameID, attrname, attr) //设置样式 只对某打印项有效
varItemNameID: 如果序号为0,代表当前(最后加入的那个)数据项;如果序号是负数,代表前面加入的数据项,该值为前移个数偏移量。
attrname: 要设置的属性名称 大驼峰命名 例如 FontSize FontColor
attr: 设置属性值
常用的attrname 及 意思 (自己总结的 ,可能不对, 具体的可以那这个属性名称去google)
Alignment 设置页面居中
ItemType 显示类型
FontSize 字号
FontColor 字体颜色
Offset2Top 设置表格偏移
LinkedItem 上下文关联 (使上下文紧密联系起来)
Horient 计算属性
LODOP.SET_PRINT_PAGESIZE('纸张方向', '纸张宽度', '纸张高度', '纸张类型')
LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1) // 横向时的正向显示
LODOP.ADD_PRINT_TEXT('top', 'left', 'width', 'height', 'content') // 打印文本
LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true) 打印基点 (基点就是真实打印机的物理边距)
LODOP.PREVIEW() 打印预览
然后根据项目说一下具体的打印组件封装思路
1.首先校验是否安装打印依赖
2.获取要打印的元素
3.获取打印配置
4.计算打印纸张与你传值的内容的具体比例。根据计算得到的约等于2.64 后边会有具体的算法 然后计算纸张宽高,单位为0.1mm 譬如该参数值为45,则表示4.5mm,计量精度是0.1mm
5.根据打印配置 + 获取到的元素 + 样式(样式根据需求和设计来写)去进行打印预览
算了 直接贴代码 欢迎指正
/* eslint-disable */
import $ from 'jquery'
import {
getLodop} from '../../src/assets/print/LodopFuncs'
// import $utils from '@/utils/utils'
import {
MessageBox} from 'element-ui'
import axios from '../../src/config/axios'
import $common from './Common'
var total, Thead, Tbody, table, head, foot // 合计 单据头 表格 单据尾 表格头
var configParams = {
} // 注入打印参数
const ratio = 2.64 // 打印纸张相对的比例
const magnification = 10 // 倍数
const user = {
id: sessionStorage.user ? JSON.parse(sessionStorage.getItem('user')).id : '',
name: sessionStorage.user ? JSON.parse(sessionStorage.getItem('user')).name : '',
shopName: sessionStorage.user ? JSON.parse(sessionStorage.getItem('user')).storeName : ''
}
// 打印入口
const preview = function (name, prints, cId) {
// 检查是否安装lodop 没有安装先进行安装
if (!checkLodop()) {
return false
}
// 去打印
printPreview(name, prints, cId)
}
// 校验打印机是否安装 如未安装 则去安装
const checkLodop = function () {
let LODOP = getLodop()
if (!LODOP) {
// 如未安装打印控件,提示用户安装
MessageBox.confirm('未安装打印控件!是否安装打印控件?安装后请刷新页面!', '打印提示', {
confirmButtonText: '下载',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
window.location.href = 'http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip'
}).catch(() => {
// Message.info('已取消下载')
})
return false
} else {
return true
}
}
// 获取页面元素
const getElement = function (name, attr) {
let tags = document.querySelectorAll('#right>.main-content>.el-tabs__content > div')
for (let i = 0; i < tags.length; i++) {
if (tags[i].style[0] !== 'display') {
return $(tags[i]).find(name)
}
}
}
// 获取打印配置
const getPrintConfig = function (prints) {
return new Promise(function (resolve, reject) {
let params = {
cMdcode: prints
}
axios.get(`/tbBaseConfig/getTbcBillformPrint`, {
params: params}).then(res => {
if (res.data.data && res.data.meta.code === 0 && res.data.data.tbcBillformPrintList) {
resolve(res.data.data.tbcBillformPrintList)
} else {
resolve(false)
}
})
})
}
// 打印预览
const printPreview = function (name, prints, cId) {
// 首先获取打印元素
Thead = getElement('.el-table__header-wrapper').last() // 获取表头
Tbody = getElement('.el-table__body-wrapper').last() // 主体
table = getElement('.plsss').eq(0) // 获取表格
head = getElement('.tou').eq(0) // 获取单据头
foot = getElement('.fooT').eq(0) // 获取单据尾
total = getElement('.el-table__footer-wrapper').last() // 获取合计
console.log(Thead, '表头')
console.log(table, '表格')
console.log(head, '单据头')
// console.log(foot.html(), '单据尾')
console.log(total, '合计')
// 获取打印配置参数并转换
getPrintConfig(prints).then(res => {
if (res) {
res.map((item) => {