vue封装下载方法,实现下载功能,下载excel,文件等(利用a标签实现下载)

封装一个公共的下载方法(下载方法不一,以下方法只是实现的其中一种)

this.$axios({
url:"*****",// 具体地址根据后端提供的来
reponseType:"blob",// 表明返回服务器返回的数据类型(关键:要写)
method:"GET",// 请求方法不一定(可能是get也可能是post,根据后端具体情况)
params:{参数名:参数值,参数名:参数值},
headers:{"Content-Type":"application/json"},
}).then(res => {
fileDownload('',1,res)// 该方法就是以下的封装方法
})
/** 文件下载方法
*@param fileName 文件名
*@param type 文件类型
*@param result 文件流(故后端返回的bolb类型文件流)
**/
const fileDownload = function(fileName,type,result) {
// 如果没返回数据,就return出去
if(!result){ return }

switch(type){
	case 1: 
	fileName += ".docx"
	break;
	case 2: 
	fileName += ".xlsx"
	break;
	case 3: 
	fileName += ".pdf"
	break;
	case 4: 
	fileName += ".zip"
	break;
	case 5: 
	fileName += ".doc"
	break;
	case 6: 
	fileName += ".xls"
	break;
	default:
	break;
}
/-----------------以下所有步骤可以直接写在.then方法里,封装只是为了提高复用性------------/

// 创建url
let url = window.URL.createObjectURl(new Blob([result.data]))
// 创建a标签
let link = document.createElement("a")
// 隐藏a标签(防止渲染在页面,因为在这个地方创建a标签只是为了调用a标签下载功能)
link.style.display = "none"
// a标签herf对应url
link.href = url
// 若后端返回了文件名,就用后端返回的文件名(若加密返回需解码) 注:此处也可以不用后端返回文件名,也可以前端直接写死,根据场景不同,灵活应对
let contentDispositon = result.headers["content-disposition"] // 后端返回文件不一定都放在这
if(contentDispositon) {
fileName = decodeURLComponent(contentDispositon.split("=")[1])// split这里的切割,根据后端返回文件名的数据不同,自由切割,不固定
}
// 调用下载方法
link.download = fileName 
// a标签添加页面中
document.body.appendChild(link)
// 调用a标签点击事件,触发a标签
link.click()
//操作完毕后,移除a标签
link.remove()
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值