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'
  });
};

这样即可成功下载 

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

相关文章

  • 解决vue中el-tab-pane切换的问题

    解决vue中el-tab-pane切换的问题

    这篇文章主要介绍了解决vue中el-tab-pane切换的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js+element 默认提示中英文操作

    vue.js+element 默认提示中英文操作

    这篇文章主要介绍了vue.js+element 默认提示中英文实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue手写横向轮播图的实例

    Vue手写横向轮播图的实例

    这篇文章主要介绍了Vue手写横向轮播图的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue echart的使用详细教程

    vue echart的使用详细教程

    这篇文章主要为大家详细介绍了Vue中引用echarts的超详细教程,文中的示例代码简洁易懂,对我们熟练使用vue有一定的帮助,需要的小伙伴可以参考一下
    2023-09-09
  • vuex 中辅助函数mapGetters的基本用法详解

    vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,在组件或界面中不使用mapGetter调用映射vuex中的getter,在组件或界面中使用mapGetter调用映射vuex中的getter,具体内容跟随小编一起通过本文学习吧 
    2021-07-07
  • 详解Vue-cli webpack移动端自动化构建rem问题

    详解Vue-cli webpack移动端自动化构建rem问题

    这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue本地模拟服务器请求mock数据的方法详解

    vue本地模拟服务器请求mock数据的方法详解

    这篇文章主要给大家介绍了关于vue本地模拟服务器请求mock数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue 动态添加路由及生成菜单的方法示例

    Vue 动态添加路由及生成菜单的方法示例

    这篇文章主要介绍了Vue 动态添加路由及生成菜单的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 简易Vue评论框架的实现(父组件的实现)

    简易Vue评论框架的实现(父组件的实现)

    本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue  composition-api 封装组合式函数的操作方法

    vue  composition-api 封装组合式函数的操作方法

    在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数,这篇文章主要介绍了vue  composition-api 封装组合式函数的操作方法,需要的朋友可以参考下
    2022-10-10

最新评论