后端返回文件前端实现下载功能

   <el-button type="primary" round @click="templateDownLoad()">下载模板</el-button>
//当后端返回的是文件的时候,我们怎么在各大浏览器实现下载功能
//后端定义的是传0的时候,我们下载模板
    templateDownLoad() {
      getTemplateUrl('0')
        .then(res => {
          const d = `${BASE_HOST}${BASE_PARJECT_NAME}/下载接口/0`
          const url = d.replace(/"/g, '')
          const alink = document.createElement('a')
          document.body.appendChild(alink)
          alink.style.display = 'none'
          alink.href = url
          var explorer = window.navigator.userAgent
          if (explorer.indexOf('Firefox') >= 0) {
            alink.download = getTemplateUrl
            const clickEvent = new MouseEvent('click')
            alink.dispatchEvent(clickEvent)
          } else if (explorer.indexOf('Safari') >= 0) {
            alink.target = '_blank'
            alink.addEventListener('click', event => {}, false)
            const clickEvent = new MouseEvent('click', {
              altKey: true
            })
            alink.dispatchEvent(clickEvent)
          } else {
            alink.download = getTemplateUrl
            alink.target = '_blank'
            alink.addEventListener('click', event => {}, false)
            const clickEvent = new MouseEvent('click', {
              altKey: true
            })
            alink.dispatchEvent(clickEvent)
          }
        })
        .catch(error => {
          console.log('error', error)
        })
    },

在ie浏览器上出现了兼容性的问题,ie浏览器不支持MouseEvent事件,这个时候,只需要做ie对事件的兼容性即可

  beforeCreate() {
    (function(window) {
      try {
        new MouseEvent('test')
        return false // No need to polyfill
      } catch (e) {
        // Need to polyfill - fall through
      }
      var MouseEvent = function(eventType, params) {
        params = params || { bubbles: false, cancelable: false }
        var mouseEvent = document.createEvent('MouseEvent')
        mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

        return mouseEvent
      }

      MouseEvent.prototype = Event.prototype

      window.MouseEvent = MouseEvent
    })(window)
  },
原文地址:https://www.cnblogs.com/smart-girl/p/12048074.html