java文件下载前端js接收下载数据

新新小一

已于 2023-01-03 17:58:27 修改

阅读量132

点赞数

文章标签：前端 java javascript

于 2023-01-03 17:41:43 首次发布

本文链接：https://blog.csdn.net/qwerzzl123/article/details/128536650

版权

java代码

@CrossOrigin(origins = "*",maxAge = 3600)
@GetMapping("/download")
public void download(String fileUrl, HttpServletRequest request, HttpServletResponse response) throws IOException{
    if (null == fileUrl || fileUrl.length() == 0) {
        throw new RuntimeException("文件地址无效");
    }
    URL url = new URL(fileUrl);
    String path = url.getPath();
    String[] split = path.split("\\.");
    //获取文件后缀
    String ext = split[split.length-1];
    BufferedInputStream in = null;
    in = new BufferedInputStream(url.openStream());
    response.reset();
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    response.addHeader("Access-Control-Allow-Headers", "Content-Type");
    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition",
            "attachment;filename=\"" + URLEncoder.encode("file."+ext, "UTF-8") + "\"");

    // 将网络输入流转换为输出流
    int i;
    while ((i = in.read()) != -1) {
        response.getOutputStream().write(i);
    }
    in.close();
    response.getOutputStream().close();
}

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<script type="text/javascript">

    var url = 'http://101.200.76.162:8080/training/document/download?fileUrl=http://101.200.76.162/2020-7-17/e6726585-774f-48a7-94cd-1273061e2f91.mp4';

    var xhr = new XMLHttpRequest();
    //GET请求,请求路径url,async(是否异步)
    xhr.open('GET', url, true);
    //设置请求头参数的方式,如果没有可忽略此行代码
    xhr.setRequestHeader("token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTU0NjQyNDgsInVzZXJuYW1lIjoiYWRtaW4ifQ.OuLr7CMRR8BqeQfdMgewZWZ5_cQcTytNtKvFXJQRqw0");
    //设置响应类型为 blob
    xhr.responseType = 'blob';
    //关键部分
    xhr.onload = function (e) {
        //如果请求执行成功
        if (this.status == 200) {
            var blob = this.response;
            var filename = "1111.mp4";//如123.xls
            var a = document.createElement('a');

            blob.type = "application/octet-stream";
            //创键临时url对象
            var url = URL.createObjectURL(blob);

            a.href = url;
            a.download=filename;
            a.click();
            //释放之前创建的URL对象
            window.URL.revokeObjectURL(url);
            //可在这里关闭遮罩层
        }
    };
    //发送请求
    xhr.send();
</script>
</body>
</html>