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


       <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)
      },
    
  • 相关阅读:
    VS2008 查找失效怎么办
    Winfrom弹出下拉编辑控件,DataGridView弹出查询对话框下拉录入,支持TextBox
    修改SQL Server 2005的默认端口
    C#操作XML小结
    金蝶KIS系列 KISBOS 二次开发学习资料 例子 习题 讲解
    Datawindow.net中实现让当前行选中,并且当前行以其他颜色显示
    sqlserver 截取字符串
    python3定时爬虫
    linux下安装pyenv及使用pyenv管理不同的python版本
    CentOS7下安装mysql最快捷方式及mysql远程访问连接实现
  • 原文地址:https://www.cnblogs.com/smart-girl/p/12048074.html
Copyright © 2020-2023  润新知