用a标签的download下载,如果是第三方资源的话,就需要请求回来,否则的话,就会被当做链接打开。还要看看后端有没有CORS策略阻止。

//判断是不是ie浏览器
   IEVersion() {
      let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
      let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
      let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
      let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE || isEdge || isIE11) {
        return true
      }
    },
 download(){
      const fileName = 'ITSell.jpeg' // 导出文件名
      // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
      // IE10以上支持blob但是依然不支持download
     
        const blob = new Blob([content]) // 构造一个blob对象来处理数据。content是请求返回的blob数据;请求的时候,要加上responseType = 'blob'让服务器返回blob类型
      if ('download' in document.createElement('a') && !IEVersion()) { // 支持a标签download的浏览器
        const link = document.createElement('a') // 创建a标签
        link.download = fileName // a标签添加属性
        link.style.display = 'none'
        link.href =URL.createObjectURL(blob);
        document.body.appendChild(link)
        link.click() // 执行下载
        URL.revokeObjectURL(link.href) // 释放url
        document.body.removeChild(link) // 释放标签
      } else { // 其他浏览器
        navigator.msSaveBlob(blob, fileName);
      }
    },

敏小静
55 声望3 粉丝

前端工程师