前端调用浏览器打印判断用户点击确认还是取消

window监听到打印的beforePrint和afterPrint两个事件，但是无论点击打印还是取消都会触发afterPrint事件，所以只能通过这个事件的触发让用户自己判断是否打印成功，以此来记录数据是否打印或者是打印了几次，以下是打印的方法

// import Vue from "vue";
import { productionPlanPrint } from '@/api/prodPlan'
const isDOM = (obj) => {
  return typeof HTMLElement === 'object'
    ? obj instanceof HTMLElement
    : obj &&
        typeof obj === 'object' &&
        obj.nodeType === 1 &&
        typeof obj.nodeName === 'string'
}
/* const extend = (obj, obj2) => {
  for (const k in obj2) {
    if (obj2.hasOwnProperty(k)) obj[k] = obj2[k]
  }
  return obj
} */
const isInBody = (node) => {
  return node === document.body ? false : document.body.contains(node)
}
const wrapperRefDom = (refDom) => {
  let prevDom = null
  let currDom = refDom
  if (!isInBody(currDom)) return currDom

  while (currDom) {
    if (prevDom) {
      const element = currDom.cloneNode(false)
      element.appendChild(prevDom)
      prevDom = element
    } else {
      prevDom = currDom.cloneNode(true)
    }
    currDom = currDom.parentElement
  }
  return prevDom
}
const getStyle = (options) => {
  let str = ''
  const styles = document.querySelectorAll('style,link')
  for (let i = 0; i < styles.length; i++) {
    str += styles[i].outerHTML
  }
  str +=
    '<style>' +
    (options.noPrint ? options.noPrint : '.no-print') +
    '{display:none;}</style>'
  return str
}
const getHtml = (dom, options) => {
  const inputs = document.querySelectorAll('input')
  const textAreas = document.querySelectorAll('textarea')
  const selects = document.querySelectorAll('select')

  for (let k = 0; k < inputs.length; k++) {
    if (inputs[k].type === 'checkbox' || inputs[k].type === 'radio') {
      if (inputs[k].checked === true) {
        inputs[k].setAttribute('checked', 'checked')
      } else {
        inputs[k].removeAttribute('checked')
      }
    } else if (inputs[k].type === 'text') {
      inputs[k].setAttribute('value', inputs[k].value)
    } else {
      inputs[k].setAttribute('value', inputs[k].value)
    }
  }

  for (let k2 = 0; k2 < textAreas.length; k2++) {
    if (textAreas[k2].type === 'textarea') {
      textAreas[k2].innerHTML = textAreas[k2].value
    }
  }

  for (let k3 = 0; k3 < selects.length; k3++) {
    if (selects[k3].type === 'select-one') {
      const child = selects[k3].children
      for (const i in child) {
        if (child[i].tagName === 'OPTION') {
          if (child[i].selected === true) {
            child[i].setAttribute('selected', 'selected')
          } else {
            child[i].removeAttribute('selected')
          }
        }
      }
    }
  }
  return options.noPrintParent ? dom.outerHTML : wrapperRefDom(dom).outerHTML
}
// var flag = false
const toPrint = (frameWindow, target, id) => {
  // var beforePrint = function() {
  //   // console.log('beforePrint');
  // }
  // var afterPrint = function() {
  //   flag = true
  //   // console.log('afterPrint')
  //   // target.$confirm('是否打印成功', '提示', {
  //   //   confirmButtonText: '成功',
  //   //   cancelButtonText: '失败',
  //   //   type: 'warning'
  //   // }).then(() => {
  //   //   flag = true
  //   //   // console.log('ddd',id)
  //   //   // productionPlanPrint({ id }).then(res =>{
  //   //   //   console.log('rrr', res)
  //   //   //   if (res.code==200){
  //   //   //     target.$message({
  //   //   //       type: 'success',
  //   //   //       message: '打印数据更新成功'
  //   //   //     })
  //   //   //   }
  //   //   // })
  //   // }).catch(() => {
  //   //   target.$message({
  //   //     type: 'info',
  //   //     message: '未成功打印'
  //   //   })
  //   // })
  //   // return flag
  // }
  //
  // if (frameWindow.matchMedia) { // 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
  //   var mediaQueryList = frameWindow.matchMedia('print')
  //   mediaQueryList.addListener(function(mql) {
  //     // console.log('fff',mql)
  //     if (mql.matches) {
  //       beforePrint()
  //     } else {
  //       afterPrint()
  //     }
  //   })
  // }
  //
  // window.onbeforeprint = beforePrint;
  // window.onafterprint = afterPrint;

  try {
    setTimeout(function() {
      frameWindow.focus()
      try {
        // var mediaQueryList = frameWindow.matchMedia('print')
        // mediaQueryList.addListener((mql)=> {
        //   console.log('aaa',mql.matches)
        //   // if (mql.matches) {
        //   //   beforePrint();
        //   // } else {
        //   //   afterPrint();
        //   // }
        // })
        // console.log('打印',!frameWindow.document.execCommand('print', false, null))
        if (!frameWindow.document.execCommand('print', false, null)) {
          frameWindow.print()
          // console.log('打印1')
        }
      } catch (e) {
        frameWindow.print()
        // console.log('打印2')
      }
      frameWindow.close()
    }, 10)
  } catch (err) {
    console.log('err', err)
  }
}
const writeIframe = (content, target, id) => {
  const iframe = document.createElement('iframe')
  const f = document.body.appendChild(iframe)
  iframe.id = 'myIframe'
  iframe.setAttribute(
    'style',
    'position:absolute;width:0;height:0;top:-10px;left:-10px;'
  )
  const w = f.contentWindow || f.contentDocument
  const doc = f.contentDocument || f.contentWindow.document
  doc.open()
  doc.write(content)
  doc.close()
  iframe.onload = function() {
    // w.onafterprint = e=>{
    //   console.log('打印后',e)
    // }
    toPrint(w, target, id)
    setTimeout(function() {
      document.body.removeChild(iframe)
      // console.log('iii')
    }, 100)
  }
  return w
}

const Print = (dom, options, target, id) => {
  // console.log('ddd',target)
  options = { ...options, noPrint: '.no-print' }
  let targetDom
  if (typeof dom === 'string') {
    targetDom = document.querySelector(dom)
  } else {
    targetDom = isDOM(dom) ? dom : dom.$el
  }

  const content = getStyle(options) + getHtml(targetDom, options)
  const w = writeIframe(content, target, id)
  // console.log('ddd',flag)
  return w
}

export default Print

调用方法后监听iframe的afterPrint事件

// 打印BOM清单
    printTable(val) {
      let _this = this
      // console.log('打印',this.printTableData)
      // console.log('dd',this.printTableTitle.id)
      this.isShow = true
      setTimeout(async() => {
        const frameWindow = await VabPrint(this.$refs[val], { noPrintParent: true }, this,this.printTableTitle.id)
        // console.log('dddd',result)
        // 打印前
        var beforePrint = function() {
          // console.log('beforePrint');
        }
        // 打印后
        var afterPrint = function() {
          // console.log('afterPrint')
          _this.$confirm('是否打印成功', '提示', {
            confirmButtonText: '成功',
            cancelButtonText: '失败',
            type: 'warning'
          }).then(() => {
            // console.log('ddd',id)
            productionPlanPrint({ id: _this.printTableTitle.id }).then(res => {
              // console.log('rrr', res)
              if (res.code==200){
                _this.$message({
                  type: 'success',
                  message: '打印数据更新成功'
                })
                _this.drawer = false
                _this.handleQuery(_this.pageNum)
              }
            })
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '未成功打印'
            })
          })
        }
        if (frameWindow.matchMedia) { // 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
          var mediaQueryList = frameWindow.matchMedia('print')
          mediaQueryList.addListener(function(mql) {
            // console.log('fff',mql)
            if (mql.matches) {
              beforePrint()
            } else {
              afterPrint()
            }
          })
        }
        this.isShow = false
      }, 10)
    }