iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascriptBlob对象实现文件下载
  • 958
分享到

javascriptBlob对象实现文件下载

2024-04-02 19:04:59 958人浏览 独家记忆
摘要

目录说明一、Blob对象二、前端三、后端总结说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何

说明

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

总结

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

--结束END--

本文标题: javascriptBlob对象实现文件下载

本文链接: https://www.lsjlt.com/news/160647.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascriptBlob对象实现文件下载
    目录说明一、Blob对象二、前端三、后端总结说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何...
    99+
    2024-04-02
  • Blob对象实现文件上传下载示例详解
    目录什么是Blod?Blob的属性与方法使用Blod下载指定类型文件上传FileReader对象的异步方式读取首先先介绍一下 FileReader对象FileReader常用属性与方...
    99+
    2023-01-04
    Blob对象实现文件上传下载 Blob文件上传下载
  • Blob对象如何实现文件上传下载功能
    本篇内容介绍了“Blob对象如何实现文件上传下载功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是Blod?Blob 对象表示一个不可...
    99+
    2023-07-04
  • 对象存储MinIO(实现文件上传、读取、下载、删除)
    一、 MinIO         MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服 务接口,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/ 虚拟机镜...
    99+
    2023-08-31
    spring boot java mysql
  • HTML怎么实现文件下载对话框
    本篇内容介绍了“HTML怎么实现文件下载对话框”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!文件下载对话框我们先在当前目录下创建 foo.t...
    99+
    2023-06-08
  • Android实现文件下载
    前言 总体思路:下载文件到应用缓存路径,在相册创建文件夹,Copy过去,通知相册刷新。 下载文件到APP缓存路径,这样可避免Android高版本读取本地权限问题, 准备 impl...
    99+
    2024-04-02
  • ASP.NETMVC实现文件下载
    思路 点击一个链接,把该文件的Id传递给控制器方法,遍历文件夹所有文件,根据ID找到对应文件,并返回FileResult类型。 与文件相关的Model: namespace MvcA...
    99+
    2022-11-13
    ASP.NET MVC 文件下载
  • thinkphp5实现文件下载
    public function download() { $famlePath = $_GET[‘resum’]; f i ...
    99+
    2023-09-01
    php
  • SpringBoot下载文件的实现及速度对比
    目录前言文件来源文件下载1、OutputStream形式2、ResponseEntity形式两种方式下载速度比较后话前言 承上篇上传文件之后,本文就主要介绍下SpringBoot下下...
    99+
    2024-04-02
  • vue实现zip文件下载
    本文实例为大家分享了vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 <el-button size="mini" type="succ...
    99+
    2024-04-02
  • 如何使用FormData对象和Spring MVC配合实现Ajax文件下载功能
    这篇文章将为大家详细讲解有关如何使用FormData对象和Spring MVC配合实现Ajax文件下载功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Ajax文件下载利...
    99+
    2024-04-02
  • iOS实现文件下载功能
    本文实例为大家分享了iOS实现文件下载的具体代码,供大家参考,具体内容如下 说明: 1).获取网络文件大小; 2).开启循环,计算每段position开始与结束位置,通过Range头...
    99+
    2024-04-02
  • SpringMVC实现上传下载文件
    本文实例为大家分享了SpringMVC实现上传下载文件的具体代码,供大家参考,具体内容如下 一、SpringMVC专门提供了CommonsMultipartResolver组件用于文...
    99+
    2024-04-02
  • Servlet实现文件下载功能
    本文实例为大家分享了Servlet实现文件下载的具体代码,供大家参考,具体内容如下把文件目录直接暴露给用户是很不安全的。所以要用Servlet来做,而且这样做,文件的存储方式就更丰富了,可以是从文件系统上取来的,也可以是数据库中经过计算生成...
    99+
    2023-05-30
    servlet 文件下载 实现文件
  • Android简单实现文件下载
    本文实例为大家分享了Android简单实现文件下载的具体代码,供大家参考,具体内容如下 权限 <!-- 文件读写权限 --> <uses-permissio...
    99+
    2024-04-02
  • Ajax如何实现文件下载
    小编给大家分享一下Ajax如何实现文件下载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JQuery的ajax函数的返回类型只有xml、text、json、htm...
    99+
    2023-06-08
  • django 实现文件下载功能
    在实际的项目中很多时候需要用到下载功能,如导excel、pdf或者文件下载,当然你可以使用web服务自己搭建可以用于下载的资源服务器,如nginx,这里我们主要介绍django中的文件下载。前端实现方式a标签+响应头信息<a ...
    99+
    2023-01-31
    功能 文件 django
  • js如何实现文件流式下载文件
    在JavaScript中,可以使用Blob对象和URL.createObjectURL()方法来实现文件的流式下载。具体步骤如下:1...
    99+
    2023-08-09
    js
  • python实现自动下载sftp文件
    本文实例为大家分享了python实现自动下载sftp文件的具体代码,供大家参考,具体内容如下 实现功能:利用python自动连接sftp,并下载sftp中指定目录下的所有目录及文件 ...
    99+
    2024-04-02
  • SpringMVC实现文件上传与下载
    本文实例为大家分享了SpringMVC实现文件上传与下载的具体代码,供大家参考,具体内容如下 0.环境准备 1.maven依赖 <dependencies> ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作