axios+vue下载文件需求

vue 下载为xls表格

axios.post(
        'a.bbb.cc/d/ee',//请求的url
        {
            'data':this.data//请求数据
        },
        {
            responseType:'blob'//服务器返回的数据类型{必填}
        }
        ).then((res)=>{
            //此处有个坑。这里用content保存文件流,最初是content=res,但下载的test.xls里的内容以下图1,
            //检查了下才发现,后端对文件流作了一层封装,因此将content指向res.data便可
            //另外,流的转储属于浅拷贝,因此此处的content转储仅仅是便于理解,并无实际做用=_=
            const content = res.data
            const blob = new Blob([content])//构造一个blob对象来处理数据
            const fileName = 'test.xls'//文件类型后缀能够修改
 
            //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
            //IE10以上支持blob可是依然不支持download
            if ('download' in document.createElement('a')) { //支持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)
            }
 
      }).catch((err)=>{
          console.log(err);
      })
复制代码
相关文章
相关标签/搜索