前言
这个记录是因为我的一个后端同事来问我，浏览器能不能下载有token校验的流文件，我一想这个之前的确没尝试过，于是就去了解学习了一下，在这里记录一下。
浏览器实现
下载插件并启用
在浏览器中添加请求头即可
代码实现
后来我的同事说他没有edge浏览器，而且谷歌下载这个需要代理比较麻烦，于是我就想着用代码去实现，然后我就写了个fetch请求，发现拿到的数据是流，而不是我平时接触过的数据的编码格式，于是我就去找文档
看到这里我眼前一亮，后面变成的格式我就会处理了，于是我新建了一个html，写了个fecth请求，根据文档得到stream，然后转为blob，通过浏览器自带的转化blob的方法，就把下载文件给实现了。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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<button onclick="queryPdfData()">下载文件</button>
</body>
<script>
function queryPdfData(){
fetch("http://60.190.3.170:8091/jiaLin/getPreFile?type=0&keyword=LS23000173&fileType=3",{header:{'token':'bea7c7a3716f1bac133988fde350c02e'}}).then((response) =>response.body)
.then((rb) => {
const reader = rb.getReader();
return new ReadableStream({
start(controller) {
// The following function handles each data chunk
function push() {
// "done" is a Boolean and value a "Uint8Array"
reader.read().then(({ done, value }) => {
// If there is no more data to read
if (done) {
controller.close();
return;
}
// Get the data and send it to the browser via the controller
controller.enqueue(value);
// Check chunks by logging to the console
push();
});
}
push();
},
});
})
.then((stream) =>{
// Respond with our stream
return new Response(stream)
}
)
.then((response) => response.blob())
.then((blob) => {
const url=window.URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }))
window.open(url)
})
}
</script>
</html>
好了，本篇分享就到这里了
