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

 更新时间:2022年09月22日 11:24:59   作者:有蝉  
这篇文章主要介绍了vue如何使用文件流进行下载(new Blob),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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时,我们前端如何处理后端返回的文件流

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

    /**
     * 下载单个文件
     *
     * @param docId
     */
    @GetMapping("/download/{docId}")
    public void download(@PathVariable("docId") String docId,
                         HttpServletResponse response) {
        outWrite(response, docId);
    }
    
    /**
     * 输出文件流
     * @param response
     * @param 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

/**
 * 下载单个文件
 * @param {*} id
 */
const download = (id) => {
  return request({
    url: _DataAPI.download + id,
    method: "GET",
    responseType: 'blob'
  });
};

这样即可成功下载 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vscode 使用Prettier插件格式化配置使用代码详解

    vscode 使用Prettier插件格式化配置使用代码详解

    这篇文章主要介绍了vscode 使用Prettier插件格式化配置使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    vue项目打包过后发现地址错了或者发布到别的服务器发现请求的地址不对,每次都要去重新打包,太浪费时间,下面这篇文章主要给大家介绍了关于Vue项目打包后可修改基础接口地址配置的具体操作,需要的朋友可以参考下
    2022-08-08
  • vue遍历中存在el-form之踩坑记录

    vue遍历中存在el-form之踩坑记录

    这篇文章主要介绍了vue遍历中存在el-form之踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue部署到线上为啥会出现404的原因分析及解决

    vue部署到线上为啥会出现404的原因分析及解决

    这篇文章主要介绍了vue部署到线上为啥会出现404的原因分析及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • go-gin-vue3-elementPlus带参手动上传文件的案例代码

    go-gin-vue3-elementPlus带参手动上传文件的案例代码

    这篇文章主要介绍了go-gin-vue3-elementPlus带参手动上传文件的案例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • VUE JS 使用组件实现双向绑定的示例代码

    VUE JS 使用组件实现双向绑定的示例代码

    本篇文章主要介绍了VUE JS 使用组件实现双向绑定,详细的介绍了vue的双向数据绑定原理以及核心代码模块,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • vue3如何用pinia替代vuex

    vue3如何用pinia替代vuex

    这篇文章主要介绍了vue3如何使用pinia替代vuex问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Element中el-tabs左右滑动动画的实现

    Element中el-tabs左右滑动动画的实现

    本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • 基于 vue-skeleton-webpack-plugin 的骨架屏实战

    基于 vue-skeleton-webpack-plugin 的骨架屏实战

    这篇文章主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    Vue项目全局配置页面缓存之按需读取缓存的实现详解

    这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-08-08

最新评论