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

作者: Mracale | 来源:发表于2020-07-20 21:48 被阅读0次

java文件下载前端js接受下载数据
前端使用bower+grunt-wiredep自动引入js和cs
js下载后台传过来的流文件
前端js下载文件
Vue-纯前端导出word文档
Vue-纯前端导出word文档
前端 js vue 获取服务端返回的文件的原始文件名
iOS WKWebView实现blob协议文件下载
利用HTML/HTML5中的download属性来实现数据csv
前端文件下载

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>