vue,下载方法,兼容ie,edage,谷歌等等

这里使用axios前端http库;

/**
   * 小文件下载方法
   * @param url
   * @param params
   * @param fileName  下载文件的名称,包括后缀
   * @returns {*|Promise<any>}
   */
  function download (url, methods, data, params, config) {
    params = params || {}
    const URL = url.indexOf('http') !== -1 ? url : baseURL + url
    const headers = config.headers || {
      'content-type': 'application/x-www-form-urlencoded',
      'esponseType': 'blob'
    }
    params.fileName = config.fileName
    return new Promise((resolve, reject) => {
      axios({
        method: methods,
        baseURL: URL,
        params: params,
        data,
        headers: headers,
        responseType: 'blob' // 表明返回服务器返回的数据类型,返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        reject(err)
      })
    })
  }


/**
 * 下载主方法
 * @param res
 */
function executeDownloadFile (res) {
  const blob = new Blob([res.data])
  const filename = res.config.params['fileName']

  if (window.navigator.msSaveBlob) { // 判断是否是IE浏览器,是的话返回true
    try {
      window.navigator.msSaveBlob(blob, filename)
    } catch (e) {
      console.log(e)
    }
  } else { // 谷歌浏览器 创建a标签 添加download属性下载
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  }
}


©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页