首页 > 其他分享 >new Blob vue中使用文件流进行下载

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

时间:2022-11-22 13:22:20浏览次数:38  
标签:vue url let Blob new data

封装方法
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();
});
原文链接:https://blog.csdn.net/qq_37899792/article/details/90748268

标签:vue,url,let,Blob,new,data
From: https://www.cnblogs.com/tcyweb/p/16914831.html

相关文章

  • vue+ openlayers + GeoServer 地图初始化 标点加弹窗看详情
    <template><divclass="mapCont"><divid="map"><divid="popup"ref="popup"class="ol-popup"v-show="vehiclePointInfo"><divid="popup-......
  • ⑧ vue+echarts实现热词分析
    依赖"dependencies":{"echarts":"^4.0.4","echarts-wordcloud":"^1.1.3",},tip:echarts-wordcloud现在有2.0和1.x两个版本,2.0对应echarts5.x版本......
  • vue 项目中,后端返回文件流,导出excel
    之前写过文件流导出excel,这次直接把上次的代码拿过来复制粘贴,但是导出的表格里面没有数据,只显示undefined。这是之前的代码//api接口页面//excel导出接口export......
  • VUE
    VUESoc:HTML+css+js:视图网络通信:axios页面跳转:vue-router状态管理:vuexVue-UI:ICE  M:模型V:视图C:控制器View:JSP{{}}DATA:mvvm:数据双向绑定 虚拟Dom:利......
  • swiper鼠标悬停(自由切换),拒绝大佬,珍爱生命![email protected]
    [email protected]@4.1.1--save-dev实测有效!JavaScript:<script>import{Swiper,SwiperSlide}from'vue-awesome......
  • vue2 计算属性9 watch immediate
    watch:监听数据发生的变化 newVal是变化后的新值,oldVal是变化前的旧值 一般都是带着接口查询的watch:{username(newVal){if(newVal==='')return$get('https:......
  • vue2-vm.$set,vm.$delete实现(三)
    vm.$set实现语法:vm.$set(target,key,value)参数:{Object|Array}target{String|Number}key{any}value返回值:{Function}unwatch用法:在object上设置一个属......
  • vue学习笔记
     --vue笔记 --页面带参数跳转testBang(){this.$router.push({path:"/layout/channel/channelAuth",query:{startDate:"test",}})}--获取url入参lettok......
  • avue框架 拼接后端返回的数据到table中
    根据要求展示下列详细地址情况: 后端返回的数据:  具体实现步骤:  {label:"详细地址",prop:"buildingName",display:false,width:130,......
  • vue3 封装axios
    1添加一个新的http.js文件封装axios 引入axios //引入Axiosimportaxiosfrom'axios'定义一个根地址//视你自己的接口地址而定varroot2='http://121.4.6......