首页 > 其他分享 >前端vue使用blob下载流文件

前端vue使用blob下载流文件

时间:2023-08-16 17:58:03浏览次数:39  
标签:文件 vue url 前端 URL window blob 下载

请求后端接口,发现返回的是这么一堆东西

 代码:

axios:

export function exportEcoCarAppoint(params) {
  return Http({
    url: '/api/jsis/ecoCarAppoint/exportEcoCarAppoint' ,
    method: 'POST',
    data: params,
    responseType: 'blob',   //设置响应格式
  })
}

js:

exportEcoCarAppoint(this.search).then(res => {
        // window.URL.createObjectURL(new Blob([res],{type:['image/png', 'pdf','doc','docx','xlsx','xls']}))
        let b = new Blob([res.data]);     //拿到文件流下载对象, 有的定义不需要.data,根据后端返回字段定
        let url = window.URL.createObjectURL(b);  //生成文件流下载链接
        let a = document.createElement('a');      //创建一个a标签用来跳转
        a.href = url;                             // a标签 href  赋值 链接  
        a.download = '报表.xlsx';                  //设置下载文件的文件名和文件格式, 这里一定要加上格式,不然下载的文件一直是txt格式的
        document.body.appendChild(a);             //将标签DOM,放置页面
        a.click();                              
        window.URL.revokeObjectURL(url);     //释放 url 对象内存
        document.body.removeChild(a);
      }).catch(err => {
        return Promise.reject(err)
      })

 

标签:文件,vue,url,前端,URL,window,blob,下载
From: https://www.cnblogs.com/mmzuo-798/p/17635796.html

相关文章

  • vue-treeselect 校验失败添加红框
    需求vue-treeselect校验及清除校验这篇介绍了用@input在校验失败时显示校验信息。但还需要同时显示红色边框。如下图所示:解决办法思路:动态绑定类名,校验失败时切换类名,更改边框颜色。子组件SelectTree二次封装vue-treeselect:组件SelectTree<template><divclass=......
  • vue-router 配置
    1.安装   npminstallvue-router--save  vue2会有版本兼容问题:[email protected].配置  在src文件夹下新建router文件夹,在router文件夹中新建index.js//导入路由对象importRouterfrom'vue-router'//vue-router是插件所以我们用Vue.use......
  • 在不利用vue实现循环数据输入到表格
    如果您不使用Vue或其他前端框架,可以使用原生的JavaScript来实现将循环数据输入到表格中的操作。首先,您需要一个包含要展示数据的数组。然后,使用JavaScript循环遍历数据数组,动态创建表格的行和单元格,并将数据填充到相应的单元格中。下面是一个示例代码,展示了如何使用JavaScript将......
  • Vue 生命周期
    生命周期生命周期函数定义的位置与data属性、methods属性平级beforeCreate在Vue实例创建之前,data中的数据和methods中的方法并没有初始化,所以它不能被调用在created生命周期函数中,data中的数据和methods中的方法已经被初始化完成,可以在页面中调用......
  • Vue 样式绑定
    绑定HTMLclass:class (v-bind:class 的缩写) :class 指令也可以和一般的 class attribute共存绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象可以给 :class 绑定一个数组来渲染多个CSSclass绑定内联样式:style 支持绑定JavaScript对象......
  • 前端文件转换
    file文件的拷贝和改名//复制文本域中的file文件并重命名letmyFile=newFile([file],"新文件的名字"]);bolb格式转base64格式functionblobToDataURL(blob,callback){letreader=newFileReader();reader.onload=function(){callback(reader.result);}re......
  • 前端合成海报并保存到本地
    近期给AI产品增加了推广返佣的能力,涉及到推广就会有分享裂变,个人的专属分享链接及海报。本次文章主要记录前端合成海报并下载到本地的流程,因为产品运行的平台主要是在小程序和PC浏览器,所以主要也是实现这两个平台的图片下载,接下来开始正文。浏览器端实现在实现下载之前首先要将海......
  • vue 报错解决方法
    nodejs版本过高导致启动项目失败  控制台输入$env:NODE_OPTIONS="--openssl-legacy-provider"重新下载依赖 npmi启动项目npmrundev 参考  umi项目启动报错node:internal/crypto/hash:71this[kHandle]=new_Hash(algorithm,xofLen);_今夜來看雪的博客-CSDN博......
  • 搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
    在Vue3中,有许多与响应式相关的函数,例如toRef、toRefs、isRef、unref等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些API并能够熟练地回答面试官的相关问题。ref()大家对于ref这个API肯定都不......
  • vue-vuex中使用commit提交mutation来修改state的原因解析
    https://blog.csdn.net/a460550542/article/details/82620457 在vuex中,关于修改state的方式,需要commit提交mutation。官方文档中有这么一句话:更改Vuex的store中的状态的唯一方法是提交mutation。为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并......