语法操作记录-下载有token校验的流文件
发表于：2023-09-07 |

前言

这个记录是因为我的一个后端同事来问我，浏览器能不能下载有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
<!DOCTYPE html>
<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>

好了，本篇分享就到这里了

语法
上一篇:
npm包的发布(一)
下一篇:
【可视化学习】39-cesium基础学习(四)

    • blog of codesigner