解决vue项目xp系统下的兼容性

在xp系统下，我们一般要求用户使用chrome49，这是chrome支持xp系统的最后一个版本。
下载地址： https://www.icka.org/2490/the-last-version-chrome-fo-xp

一、不支持globalthis

从上图我们知道，globalthis至少需要chrome71版本，导致在xp系统下项目无法打开，页面空白。

# 在main.js中插入以下代码
if (typeof globalThis === 'undefined') {
  window.globalThis = window
}

二、 父元素flex:1,子元素height:100% 失效

方案1： 通过js代码调整，经过测试发现，当flex:1的父元素设置高度后，页面恢复正常。

import { throttle } from 'lodash-es'

const userAgent = window.navigator.userAgent

function getCurrentSystem() {
  var systemName = ''
  if (userAgent.indexOf('Windows NT 10.0') != -1) {
    systemName = '10'
  } else if (userAgent.indexOf('Windows NT 6.2') != -1) {
    systemName = '8'
  } else if (userAgent.indexOf('Windows NT 6.1') != -1) {
    systemName = '7'
  } else if (userAgent.indexOf('Windows NT 6.0') != -1) {
    systemName = 'vista'
  } else if (userAgent.indexOf('Windows NT 5.1') != -1) {
    systemName = 'xp'
  }
  return systemName
}

function getChromeVersion() {
  var uarr = userAgent.split(' ')
  var chromeVersion = ''
  for (var i = 0; i < uarr.length; i++) {
    if (/chrome/i.test(uarr[i])) chromeVersion = uarr[i]
  }
  if (chromeVersion) {
    return Number(chromeVersion.split('/')[1].split('.')[0])
  } else {
    return false
  }
}

function needPolyFill() {
  const systemName = getCurrentSystem()
  if (systemName === 'xp' || getChromeVersion() < 50) return true
  return false
}

// const domArr = ['.ant-layout-content', '.root-content', '.df-drawer--wrapper', '.xp-node', '.ant-tabs']
const domArr = ['.xp-node']
function automatic(isDelay = true, fields = domArr) {
  if (!needPolyFill()) return
  fields.forEach(dom => {
    const doms = document.querySelectorAll(dom)
    doms.forEach(item => {
      if (!item) return
      if (isDelay) {
        setTimeout(() => {
          // 设置高度
          item.style.height = item.offsetHeight + 'px'
        }, 0)
      } else {
        // 设置高度
        item.style.height = item.offsetHeight + 'px'
      }
    })
  })
}
const automaticSet = throttle(automatic, 500)

export function supportXp() {
  window.isXp = needPolyFill()
  if (needPolyFill()) {
    document.body.classList.add('xp-body')
    window.addEventListener('resize', () => {
      automaticSet(true)
    })
  }
}

export async function setXpPolyFill(time = 500, isDelay = false) {
  try {
    if (!needPolyFill()) return
    if (isDelay) {
      setTimeout(() => {
        automaticSet(isDelay)
      }, time)
    } else {
      automaticSet(isDelay)
    }
  } catch (e) {}
}

export const resizeDomHeight = {
  mounted() {
    automatic(['.xp-node'])
  },
}

export const isXp = needPolyFill()

在router跳转后进行拦截

方案2： 通过CSS调整，能兼容绝大部分页面了

/* 兼容xp 父元素flex，子元素height 100%失效问题 */
.xp-body {
  main.ant-layout-content {
    height: calc(100vh - 65px);
  }
  /* router-view 节点的class */
  .root-content {
    height: calc(100% - 33px);
  }

  .root-content > .ant-tabs {
    height: 100%;
    overflow: hidden;
  }

  .ant-tabs-content {
    > .ant-tabs-tabpane {
      height: 100%;
    }
  }

  .flex-item.overflow-hide:not(.flex-box-row) {
    display: flex;
    flex-direction: column;

    > .flex-box {
      flex: 1;
    }

    > .full-height {
      flex: 1;
    }

    > div:only-child {
      flex: 1;
    }
  }

  .df-drawer--wrapper {
    height: calc(100vh - 110px);

    > .ant-tabs {
      height: 100%;
    }

    > .df-form:only-child {
      height: 100%;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    > div:only-child {
      height: 100%;
    }
  }
}

三、hiprint在chrome49下二维码打印问题

在xp下，hiprint打印二维码的时候显示出一个小黑点
hiprint使用的qrcode显示二维码的时候是svg标签，在iframe中唯独二维码无法显示出来，条形码都可以，研究了一会也没弄明白，遂放弃使用svg渲染二维码，改为图片进行替换。

使用dom-to-image在调用print()之前将svg替换成图片

import domtoimage from './dom-to-image.min.js'
import { isXp } from '@/utils/xpMixin'
;(function () {
  window.transferSvgToImg = function (wrapper = document.createElement, callback = () => {}) {
    if (!isXp) {
      callback()
      return
    }
    const doms = Array.from(wrapper.querySelectorAll('svg') || [])
    // 只对二维码进行转化，xp下二维码无法打印
    const filterDoms = doms.filter(item => {
      return item.parentNode && item.parentNode.title === '二维码'
    })
    const allPromises = filterDoms.map(dom => {
      const domParent = dom.parentNode
      return domtoimage.toPng(domParent)
    })
    //好像 async await 报错
    Promise.all(allPromises).then(res => {
      filterDoms.forEach((item, index) => {
        const img = new Image()
        img.src = res[index]
        img.style = 'width:100%;height:100%;display:block;'
        item.parentNode.replaceChild(img, item)
      })
      setTimeout(callback, 500)
    })
  }
})()