Vue2常用功能总结(2) - 常用方法集合

常用功能方法集合及默认导出

/**
 * @description：全注：本文件为一些常用的工具函数以及一些JS功能代码集合
 */

window.downloadFile = function (sUrl) {
  // iOS devices do not support downloading. We have to inform user about this.
  if (/(iP)/g.test(navigator.userAgent)) {
    alert('Your device does not support files downloading. Please try again in desktop browser.')
    return false
  }
  // If in Chrome or Safari - download via virtual link click
  if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
    // Creating new link node.
    var link = document.createElement('a')
    link.target = '_new'
    link.href = sUrl

    if (link.download !== undefined) {
      // Set HTML5 download attribute. This will prevent file from opening if supported.
      var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length)
      link.download = fileName
    }
    // Dispatching click event.
    if (document.createEvent) {
      var e = document.createEvent('MouseEvents')
      e.initEvent('click', true, true)
      link.dispatchEvent(e)
      return true
    }
  }
  // Force file download (whether supported by server).
  if (sUrl.indexOf('?') === -1) {
    sUrl += '?download'
  }
  window.open(sUrl, '_self')
  return true
}
window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1
/**
 * @name: windowDownloadFile
 * @description：文件下载:利用浏览器自带下载功能，进行文件下载(浏览器不弹出新窗口)
 * @param {String} sUrl: 文件链接地址
 * @returns {Boolean}
 */
const windowDownloadFile = window.downloadFile

/**
 * @name: downloadFile
 * @description：流数据生成文件下载
 * @param {Null} data: 文件流数据(必传)
 * @param {String} fileNameInfo: 下载后封装文件的名称信息，包括文件名和文件格式后缀(非必传，但尽量传)
 */
const downloadFile = function (data, fileNameInfo = '') {
  let elink = document.createElement('a')
  elink.download = fileNameInfo
  elink.style.display = 'none'
  let blob = new Blob([data])
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  document.body.removeChild(elink)
}

/**
 * @name: downloadFileWithFlow
 * @description：流数据生成文件下载
 * 该方法适用于返回的流数据文件格式明确，可直接将流数据封装成对应的格式文件
 * @param {Null} flow: 文件流数据(必传)
 * @param {String} fileTit: 下载后封装文件的名称(非必传，但尽量传)
 * @param {String} type: 需要生成的文件格式(默认xlsx格式)(非必传)
 */
const downloadFileWithFlow = function (flow, fileTit = '', type = 'xlsx') {
  downloadFile(flow, type ? fileTit + '.' + type : fileTit)
}

/**
 * @name: downloadFileWithResData
 * @description：流数据生成文件下载
 * 该方法适用于同一接口不确定返回的数据是什么格式(如：文件数据少返回xlsx格式，数据量大则是一个压缩包)，格式由后端在response headers内返回
 * @param {Null} resData: 下载请求的整个response(包括所有response配置以及文件流数据)(必传)
 * @param {String} fileTit: 需要生成的文件名称(非必传，但尽量传)
 */
const downloadFileWithResData = function (resData, fileTit = '') {
  let data = resData.data
  const disposition = resData.headers['suffix']
  downloadFile(data, fileTit + '.' + disposition)
}

/**
 * @name: handleObjProperty
 * @description：对象属性封装处理
 * @param {Array} propertyList: 需要封装处理的属性列表
 * @param {Object} obj: 原对象
 * @param {Object} container: 属性容器
 * @returns {Object} 属性封装完成后的容器对象
 */
const handleObjProperty = function (propertyList, obj, container = {}) {
  return propertyList.reduce((iter, val) => {
    if (val in obj && obj[val]) {
      container[val] = obj[val]
    } else {
      container[val] = ''
    }
    return container
  }, container)
}

/**
 * @name: btnLoading
 * @description: 设置操作按钮Loading
 * @returns {Boolean}
 */
const btnLoading = function () {
  setTimeout(() => {
    return false
  }, 300)
  return true
}

/**
 * @name: setDocumentTitle
 * @description：设置项目浏览器图标和标题
 * @param {Object} configData: 图标、标题、其他信息等配置 数据对象
 * @param {String} favicon: 图标属性字段
 * @param {String} title: 标题属性字段
 * @param {String} other: 其他属性字段
 */
const setDocumentTitle = function (configData, favicon, title, other) {
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'
  link.href = configData[favicon] ? configData[favicon] : ''
  document.getElementsByTagName('head')[0].appendChild(link)
  document.title = other
    ? (configData[title] ? configData[title] : '') + (configData[other] ? configData[other] : '')
    : configData[title]
      ? configData[title]
      : ''
}

/**
 * 时间差值格式化(时:分:秒)
 * @param {String} startTime: 开始时间
 * @param {String} currentTime: 当前时间
 * @return {String} 开始时间与当前时间差值 格式化后的字符串
 */
const setTimeFormatHHmmSS = function (startTime, currentTime) {
  let dateDiff = startTime - currentTime // 时间差的总毫秒数
  let hh = Math.floor(dateDiff / (3600 * 1000)) // 计算出相差小时数
  let mmDiff = dateDiff % (3600 * 1000) // 计算小时数后剩余的毫秒数
  let mm = Math.floor(mmDiff / (60 * 1000)) // 计算出相差分钟数
  let ssDiff = mmDiff % (60 * 1000) // 计算分钟数后剩余的毫秒数
  let ss = Math.round(ssDiff / 1000) // 计算出相差秒数
  return `${hh < 10 ? '0' + hh : hh}:${mm < 10 ? '0' + mm : mm}:${ss < 10 ? '0' + ss : ss}`
}

/**
 * 清除路由历史记录，防止页面后退
 */
const preventPageBack = function () {
  // 防止页面后退
  history.pushState(null, null, document.URL)
  window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL)
  })
}

/**
 * 生成随机字符串(生成随机id)
 * @param {*} length: 需要生成的字符串长度，非必传，默认生成8位
 * @param {*} chars: 字符串指定字符，非必传
 * @description：使用场景：1、用于前端生成随机的ID，现在不管是Vue还是React都需要绑定key
 * 2、在进行http请求时，避免浏览器因请求相同而不发送请求，也经常需要在请求链接上添加一些随机字符串，以作区分(更多的时候是后缀时间戳)
 */
const getUUID = function (length, chars) {
  length = length || 8
  chars = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let result = ''
  for (let i = length; i > 0; --i) {
    result += chars[Math.floor(Math.random() * chars.length)]
  }
  return result
}

/**
 * 对象转化为FormData对象
 * @param {Object} object
 * @description：使用场景：上传文件时需要构建一个FormData对象，然后有多少个参数就append多少次，该函数可以简化逻辑
 */
const getFormData = function (object) {
  let formData = new FormData()
  Object.keys(object).forEach(key => {
    const value = object[key]
    if (Array.isArray(value)) {
      value.forEach((subValue, i) => formData.append(key + `[${i}]`, subValue))
    } else {
      formData.append(key, object[key])
    }
  })
  return formData
}

/**
 * 将数字转化为对应的字母或字符
 * @param {Number} num
 * @description：将数字转化为对应的字母或字符
 */
const transformNumToCharCode = function (num = 0) {
  return String.fromCharCode(64 + parseInt(num))
}

/**
 * @name: htmlEncodeByRegExp
 * @description：用正则表达式实现html转码，对日常功能字符进行转义
 * @param {String} str: 需要转码的字符串(必传)
 * @returns {String} 转码后的字符串
 */
const htmlEncodeByRegExp = function (str) {
  var s = "";
  if (str.length == 0) return "";
  s = str.replace(/&/g, "&amp;");
  s = s.replace(/</g, "&lt;");
  s = s.replace(/>/g, "&gt;");
  s = s.replace(/ /g, "&nbsp;");
  s = s.replace(/\'/g, "&#39;");
  s = s.replace(/\"/g, "&quot;");
  return s;
}

/**
 * @name: htmlDecodeByRegExp
 * @description：用正则表达式实现html解码，将转义字符解码成日常功能字符
 * @param {String} str: 需要解码的字符串(必传)
 * @returns {String} 解码后的字符串
 */
const htmlDecodeByRegExp = function (str) {
  var s = "";
  if (str.length == 0) return "";
  s = str.replace(/&amp;/g, "&");
  s = s.replace(/&lt;/g, "<");
  s = s.replace(/&gt;/g, ">");
  s = s.replace(/&nbsp;/g, " ");
  s = s.replace(/&#39;/g, "\'");
  s = s.replace(/&quot;/g, "\"");
  return s;
}

export default {
  /**
   * 文件下载
   */
  windowDownloadFile: windowDownloadFile,
  /**
   * 流数据生成文件下载(通过A标签)
   */
  downloadFileWithFlow: downloadFileWithFlow,
  /**
   * 流数据生成文件下载(通过A标签)
   */
  downloadFileWithResData: downloadFileWithResData,
  /**
   * 对象属性封装处理
   */
  handleObjProperty: handleObjProperty,
  /**
   * 设置操作按钮Loading
   */
  btnLoading: btnLoading,
  /**
   * 设置项目浏览器图标和标题
   */
  setDocumentTitle: setDocumentTitle,
  /**
   * 将两个时间戳差值格式化成(时:分:秒)格式
   */
  formatTimeHHmmSS: setTimeFormatHHmmSS,
  /**
   * 清除路由历史记录，防止页面后退
   */
  preventPageBack: preventPageBack,
  /**
   * 生成随机字符串
   */
  getUUID: getUUID,
  /**
   * 对象转化为FormData对象
   */
  getFormData: getFormData,
  /**
   * 将数字转化为对应的字母或字符
   */
  transformNumToCharCode: transformNumToCharCode,
  /**
   * 用正则表达式实现html转码，对日常功能字符进行转码(转义)
   */
  htmlEncodeByRegExp: htmlEncodeByRegExp,
  /**
   * 用正则表达式实现html解码，将转义字符解码成日常功能字符
   */
  htmlDecodeByRegExp: htmlDecodeByRegExp
}