• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

javascript Blob对象实现文件下载

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

说明

最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了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();
            }
        }
    }

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
分享20个JavaScript 单行代码发布时间:2022-02-05
下一篇:
element用脚本自动化构建新组件的实现示例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap