后端返回文件前端實現下載功能


   <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)
  },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM