vue封装下载方法，实现下载功能，下载excel，文件等（利用a标签实现下载）_vue 点击下载 xls文件 post请求 附带传参一个对象 封装此方法

封装一个公共的下载方法（下载方法不一，以下方法只是实现的其中一种）

this.$axios({
url:"*****",// 具体地址根据后端提供的来
reponseType:"blob",// 表明返回服务器返回的数据类型（关键:要写）
method:"GET",// 请求方法不一定（可能是get也可能是post，根据后端具体情况）
params:{参数名:参数值,参数名：参数值},
headers:{"Content-Type":"application/json"},
}).then(res => {
fileDownload('',1,res)// 该方法就是以下的封装方法
})
1
2
3
4
5
6
7
8
9

/** 文件下载方法
*@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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56