vue-element-admin后台打印记录

vue-element-admin配合插件打印时，发现一个问题 使用的插件地址 github.com/xyl66/vuePl…

选择打印的部分总是里左边一段距离，研究源码发现

  // 向父级元素循环，包裹当前需要打印的元素
  // 防止根级别开头的 css 选择器不生效
  wrapperRefDom: function (refDom) {
    let prevDom = null
    let currDom = refDom
    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
    if (!this.isInBody(currDom)) return currDom

    while (currDom) {
      if (prevDom) {
        let element = currDom.cloneNode(false)
        element.appendChild(prevDom)
        prevDom = element
      } else {
        prevDom = currDom.cloneNode(true)
      }

      currDom = currDom.parentElement
    }

    return prevDom
  },

它为了防止css不生效，把所有的父级遍历了一遍包裹在我要打印的部分外面，而vue-element-admin的界面是这样的 它有一个侧边栏，内容容器main-container的css 里面有一段样式margin-left,所以每次打印都会往右偏移，我在页面下加了一个全局的style

<style >
  @media print {
      #app .main-container{
          margin-left: 0 !important;
      }
    }
</style>

之后打印就没问题了 正确的显示在最左侧