JavaScript Blob对象实现带鉴权的文件下载

作者：性能诊所时间：2026-10-24 21:13:46浏览：92

本文介绍如何利用JavaScript的Blob对象实现带鉴权的文件下载。针对后台返回链接存在权限泄露风险的问题，前端通过Ajax请求指定responseType为blob，解析响应头获取文件名，利用URL.createObjectURL生成临时链接并触发a标签下载，后端配合返回文件流，确保下载过程安全可控。

说明

近期遇到一个文件下载的需求，但该场景要求具备鉴权机制。如果直接由后台返回下载链接，一旦链接被他人获取，即可绕过权限控制直接下载文件。因此，需要采用新的实现思路。经过调研，发现利用Blob对象可以解决这一问题，这也是本文主要探讨的内容。

注意：本文仅为记录学习轨迹，如有侵权,联系删除

一、Blob对象

Blob对象用于表示不可变的原始数据类文件对象。其数据内容可以按文本或二进制格式读取，也可转换为ReadableStream以进行后续数据操作。

二、前端

基于Blob的文件下载实现思路如下：

1）使用ajax发起请求，指定接收类型为blob（responseType: ‘blob'） 2）读取请求返回的头部信息里的content-disposition，返回的文件名就在这里面（或者自定义文件名，可跳过此步骤） 3）使用URL.createObjectURL将请求的blob数据转为可下载的url地址 4）使用a标签下载

代码：


// 下载
export function download(query,newFileName) {
  return request({
    url: '/file/download',
    method: 'get',
    responseType: 'blob',
    params: query
  }).then((res) => {
    /**
     * blob下载思路
     * 1） 使用ajax发起请求，指定接收类型为blob（responseType: 'blob'）
     * 2）读取请求返回的头部信息里的content-disposition，返回的文件名就在这里面（或者自定义文件名，可跳过此步骤）
     * 3）使用URL.createObjectURL将请求的blob数据转为可下载的url地址
     * 4）使用a标签下载
     * 
     */
    let blob = res.data
    // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
    // let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
    // let contentDisposition = decodeURI(res.headers['content-disposition'])
    // let result = patt.exec(contentDisposition)
    // let fileName = result[1]

    //将请求的blob数据转为可下载的url地址
    let url = URL.createObjectURL(blob)
    // 创建一个下载标签<a>
    const aLink = document.createElement('a')
    aLink.href = url
    // 2.直接使用自定义文件名,设置下载文件名称
    aLink.setAttribute('download', newFileName )
    document.body.appendChild(aLink)
    // 模拟点击下载
    aLink.click()
    // 移除改下载标签
    document.body.removeChild(aLink);
  })
}

调用该方法


//下载
    download(row) {
      // filePath:文件路径，例如：e:\upload\
	  // fileName:文件名， 例如：a.xlsx
      let form = {
        filePath: row.filePath,
        fileName: row.fileName,
      };
      //下载,row.fileOriginalName是文件的原始名称，仅仅用于文件下载时起个名字而已
      download(form, row.fileOriginalName);
    }
// 由于本人使用的是阿里的oss服务，所以只需要传个文件路径回去后端，根据文件路径查询oss接口得到返回的文件流即可，例如（BufferedInputStream），在响应头设置好返回的类型即可

三、后端

后端这里用了阿里的oss服务，直接拿到文件流（new BufferedInputStream(ossObject.getObjectContent())），如果是非oss的情况下，只需要读取对应服务器上面的文件（File）,转成BufferedInputStream后，直接套用下面的代码即可（即通过response.getOutputStream()设置BufferedOutputStream 就行了）


	// response:响应
	// filePath:文件路径，例如：e:\upload\
	// fileName:文件名， 例如：a.xlsx
   public void download(HttpServletResponse response, String filePath, String fileName) {
        //待下载文件名
        response.reset();
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("utf-8");
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        // ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
        OSSObject ossObject = ossClient.getObject(bucketName, filePath + "/" + fileName);

        BufferedInputStream in = null;
        BufferedOutputStream out = null;

        byte[] buff = new byte[1024];
        int length = 0;
        try {
            in = new BufferedInputStream(ossObject.getObjectContent());
            out = new BufferedOutputStream(response.getOutputStream());
            while ((length = in.read(buff)) != -1){
                out.write(buff,0,length);
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if(out != null){
                try {
                    out.flush();
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if(in != null){
                try {
                    in.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }