LODOP打印集成，API分享，和打印步骤封装

前言—入职新公司以后 ，领导云淡风轻的说 打印的任务分配给你了 我一口应承下来 结果，，前任员工一堆坑 现任来填坑 一露肚皮深似海 从此打印是路人
言归正传，我们回归到需求本身，先简要说一下我们的需求，如下图

可以看到 要打印表头 表格 和表尾 而且还要做万恶的各种设置 （包含纸张大小 方向 页头页尾 截断还是换行 等等） 根据这些需求 通过代码调整 实现了如下效果

先贴一下用到的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) => {
   
   
        if (item.cKey === '是否显示页眉') {
   
   
          configParams.cIsPagehead = item.cValue
        }
        if (item.cKey