iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何使用文件流进行下载(newBlob)
  • 491
分享到

vue如何使用文件流进行下载(newBlob)

2024-04-02 19:04:59 491人浏览 泡泡鱼
摘要

目录Vue使用文件流进行下载(new Blob)封装方法vue下载文件流完整前后端代码vue使用文件流进行下载(new Blob) 封装方法 function getExel(url

vue使用文件流进行下载(new Blob)

封装方法

function getExel(url, params, index) {+
  return new Promise(function(resolve, reject) {
    let data = {
      method: "GET",
      url:url,
      headers: {
        'token':  gettoken("token")
      },
      responseType: 'arraybuffer'
    }
    resolve(axiOS(data));
  })
}

注意:responseType应设置为:'arraybuffer'

发送请求($api已经挂载在了vue对象上,所以可以这么使用)

this.$Api.getExel("/GoodsCheckService/v1/planMaterial/export?idList="+idArray)
          .then(response => {
              let a = document.createElement('a');
 
              //ArrayBuffer 转为 Blob
              let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
              
              let objectUrl = URL.createObjectURL(blob);
              a.setAttribute("href",objectUrl);
              a.setAttribute("download", '计划单电子表格.xls');
              a.click();
});

vue下载文件流完整前后端代码

使用Vue时,我们前端如何处理后端返回的文件流

首先后端返回流,这里我把流的动作拿出来了,我很多地方要用

    
    @GetMapping("/download/{docId}")
    public void download(@PathVariable("docId") String docId,
                         httpservletResponse response) {
        outWrite(response, docId);
    }
    
    
    private void outWrite(HttpServletResponse response, String docId) {
        ServletOutputStream out = null;
        try {
            out = response.getOutputStream();
            // 禁止图像缓存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            byte[] bytes = docService.downloadFileSingle(docId);
            if (bytes != null) {
                MagicMatch match = Magic.getMagicMatch(bytes);
                String mimeType = match.getMimeType();
                response.setContentType(mimeType);
                response.addHeader("Content-Length", String.valueOf(bytes.length));
                out.write(bytes);
            }
            out.flush();
        } catch (Exception e) {
            UnitedLogger.error(e);
        } finally {
            IOUtils.closeQuietly(out);
        }
    }

前端这里我引入了一个组件 js-file-download

npm install js-file-download --save

然后在Vue文件中添加进来

import fileDownload from "js-file-download";
   // 文档操作列对应事件
    async handleCommand(item, data) {
      switch (item.key) {
        case "download":
          var res = await this.download(data);
          return fileDownload(res, data.name);
        ...
        default:
      }
      // 刷新当前层级的列表
      const folder = this.getLastFolderPath();
      this.listClick(folder.folderId, folder.name);
    },
    // 下载
    async download(row) {
      if (this.isFolder(row.type)) {
        return FolderAPI.download(row.id);
      } else {
        return DocAPI.download(row.id);
      }
    },

docAPI js 注意需要设置responseType


const download = (id) => {
  return request({
    url: _DataAPI.download + id,
    method: "GET",
    responseType: 'blob'
  });
};

这样即可成功下载 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何使用文件流进行下载(newBlob)

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

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

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

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

下载Word文档
猜你喜欢
  • vue如何使用文件流进行下载(newBlob)
    目录vue使用文件流进行下载(new Blob)封装方法vue下载文件流完整前后端代码vue使用文件流进行下载(new Blob) 封装方法 function getExel(url...
    99+
    2022-11-13
  • vue中如何下载excel流文件及设置下载文件名
    目录概述1、通过 url 下载2、通过 a 标签 download 属性结合 blob 构造函数下载3、通过 js-file-download 插件概述 导出excel需求,当点击下...
    99+
    2022-11-12
  • vue后台如何返回格式为二进制流进行文件的下载
    本篇内容主要讲解“vue后台如何返回格式为二进制流进行文件的下载”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue后台如何返回格式为二进制流进行文件的下载”吧!后台返回格式为二进制流进行文件的...
    99+
    2023-06-30
  • Python中如何使用HTTP库进行文件下载?
    在Python中,要进行文件下载,首先需要使用HTTP库。Python中有很多HTTP库可供使用,如urllib、requests、httplib等。在本篇文章中,我们将主要介绍使用requests库进行文件下载的方法。 安装reque...
    99+
    2023-09-21
    http 文件 面试
  • vue后台返回格式为二进制流进行文件的下载方式
    目录后台返回格式为二进制流进行文件的下载结合项目中具体文件使用vue下载保存二进制文件方法封装:util.js请求接口方法调用后台返回格式为二进制流进行文件的下载 结合项目中 封装g...
    99+
    2022-11-13
  • js如何实现文件流式下载文件
    在JavaScript中,可以使用Blob对象和URL.createObjectURL()方法来实现文件的流式下载。具体步骤如下:1...
    99+
    2023-08-09
    js
  • 一文详解js如何用文件流下载csv文件
    本篇文章给大家带来了关于js+csv的相关知识,其中主要介绍了什么是Blob对象,怎么理解它以及如何使用文件流实现下载csv文件,感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。js使用文件流下载csv文件的实现方法理解 Blob 对象...
    99+
    2023-05-14
    javascript csv
  • PHP 中使用流方式下载文件
    在 PHP 中,可以使用 fopen () 函数打开一个远程文件,并使用流来下载文件内容到本地文件。这样优点是不用将文件全部一次性放入内存中,可以避免内存溢出的问题。 下面是一个示例代码: $url = 'http://example.co...
    99+
    2023-08-31
    laravel php
  • 使用hutool进行ftp文件下载和上传
    1 引入依赖 cn.hutool hutool-all 5.8.15 commons-net commons-net 3.6 2 工具类 package ftp;...
    99+
    2023-10-20
    java
  • vue element中axios如何下载文件
    这篇文章给大家分享的是有关vue element中axios如何下载文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。•axios 接受文件流,需要设置 {responseTyp...
    99+
    2022-10-19
  • 如何使用ByteArrayOutputStream下载文件
    目录使用ByteArrayOutputStream下载文件使用POI导出数据,然后将其下载使用ByteArrayOutputStream解决IO乱码说下经过小结一下使用ByteArr...
    99+
    2022-11-12
  • 如何使用vbs下载文件
    这篇文章主要讲解了“如何使用vbs下载文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用vbs下载文件”吧!说到使用vbs下载文件是不是想到了XMLHTTP呢,呵呵,以下是比较经典的...
    99+
    2023-06-08
  • Ajax如何实现生成流文件下载
    这篇文章主要介绍Ajax如何实现生成流文件下载,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下:// 绑定导出按钮     $...
    99+
    2022-10-19
  • Vue如何利用Blob下载原生二进制数组文件
    小编给大家分享一下Vue如何利用Blob下载原生二进制数组文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在服务端推送过来的二...
    99+
    2022-10-19
  • python如何使用requests下载文件
    这篇文章主要介绍了python如何使用requests下载文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。requests可以返回HTTP的meta信息。import&nb...
    99+
    2023-06-17
  • python 如何使用requests下载文件
    目录使用requests下载文件1、获取token,或者session2、获取下载路径3、根据下载路径拼接下载url用requests.get下载文件不知道大家有没有遇到这样的问题使...
    99+
    2022-11-13
  • python如何使用urllib.request下载文件
    这篇文章主要为大家展示了“python如何使用urllib.request下载文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“python如何使用urllib.request下载文件”这篇文章...
    99+
    2023-06-17
  • 关于node使用multer进行文件的上传与下载
    首先了解下浏览器的自动下载: 使用Express静态资源中间件的默认行为是在浏览器中展示静态文件,而不是自动下载。 如果需要访问静态资源时自动下载,可以在HTTP响应中设置Conte...
    99+
    2023-05-16
    node multer multer上传下载
  • Linux中怎么使用sFTP进行上传和下载文件
    这篇文章主要讲解了“Linux中怎么使用sFTP进行上传和下载文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Linux中怎么使用sFTP进行上传和下载文件”吧!sftp是一种安全的文件传...
    99+
    2023-06-27
  • Python面试必备:如何使用HTTP库进行文件下载和上传?
    在Python开发中,HTTP库是非常重要的一个工具,它可以让我们轻松地进行文件的下载和上传操作。在本篇文章中,我将会介绍如何使用Python的HTTP库进行文件的下载和上传。 一、Python的HTTP库简介 在Python中,有很多H...
    99+
    2023-09-21
    http 文件 面试
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作