ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-12-16 11:57:07  阅读:397  来源: 互联网

标签:返回 false alink MouseEvent 前端 window const clickEvent 下载


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

标签:返回,false,alink,MouseEvent,前端,window,const,clickEvent,下载
来源: https://www.cnblogs.com/smart-girl/p/12048074.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有