美文网首页
vue 导出 excel/csv文件

vue 导出 excel/csv文件

作者: love_peaches | 来源:发表于2022-06-16 11:40 被阅读0次

项目背景:需要导出用户的订阅消息的信息列表
后端支持:接口返回二进制流文件,直接调用接口就可获取xslx
前端准备:看代码

       const data = this.formData //接口入参数
       const  url = '/v2/XXXX/xxxxxx/export' //接口路径
      //responseType: 'blob',一定不要忘记,不然会乱码
       axios.post( url, data ,{headers:{token: 'XXXXXX'},responseType: 'blob'}).then( (res) => {
          if(res.status === 200 && res.data){
            // type: 'text/csv;charset=utf-8,%EF%BB%BF' ; 
            //需要导出 csv文件就用这上面的格式,需要导出xlsx就用下面的
            const blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            let downloadElement = document.createElement('a')
            downloadElement.href = href
            // 自定义下载后文件名,可以不设置
            downloadElement.download = 'filename.xlsx'
            downloadElement.click()
            window.URL.revokeObjectURL(href) //释放掉blob对象
          }else{
            this.error(res.message)
          }     
        }).catch((error)=>{
          console.log(error)
        })

记录一下,下次用起来可以直接找

相关文章

网友评论

      本文标题:vue 导出 excel/csv文件

      本文链接:https://www.haomeiwen.com/subject/tbtqvrtx.html