首页 > 其他分享 >vue response post 请求 excle 下载

vue response post 请求 excle 下载

时间:2023-12-29 15:33:42浏览次数:31  
标签:vue res href blob downloadElement excle response 下载

export function downloadExcel(obj) {
  return request({
    url: '/basic/cycleMoneyReport/downloadExcel',
    method: 'post',
    data: obj,
    // 请求方式必须添加 responseType 相应方式
    responseType: 'blob'
  })
}
/**
 * 从response读取流下载
 * @param response 响应体
 * @param suffix 文件后缀名
 */
export function downloadBlob(res,name){
  console.log(res)
  let blob = new Blob([res.data], {type: 'data:application/vnd.ms-excel;base64;charset=utf-8'});
  let downloadElement = document.createElement('a');
  let href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = name+'.xlsx'; //下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放掉blob对象
  return true
}
downloadExcel({
        year: this.year,
        month: this.paramDate,
        type: this.typeValue
      }).then(response => {
        downloadBlob(response,"报表")
      })

 

标签:vue,res,href,blob,downloadElement,excle,response,下载
From: https://www.cnblogs.com/chenTo/p/17934990.html

相关文章

  • 在 PyCharm 中编写 Vue 项目,你可以按照以下步骤进行: 1. **安装 Vue.js 插件**:在 PyCh
    在PyCharm中编写Vue项目,你可以按照以下步骤进行:1.**安装Vue.js插件**:在PyCharm中,选择`File->Settings…->Plugins`,搜索Vue并点击安装,安装后重启PyCharm¹²。2.**设置JavaScript**:支持Vue语法,选择`File->Settings…->Languages&Frameworks->JavaSc......
  • 当然可以。PyScript 是一个 Python 前端框架,它使用户能够在浏览器中使用 HTML 界面构
    当然可以。PyScript是一个Python前端框架,它使用户能够在浏览器中使用HTML界面构建Python程序¹。Vue是一个用于构建用户界面的渐进式框架。PyScript和Vue可以一起使用,以便在Vue组件中编写Python代码,并在Vue组件中使用Python库²。PyCharm是一个流行的Python......
  • Vue 倒计时小组件
    商城类应用开发中经常要遇到秒杀价或者到时间点开始优惠,这种业务了逻辑通常需要使用到倒计时功能。 主要使用到setTimeout方法,循环的不断调用清除调用清除,具体代码实现import{cancelRaf,rAF}from'@/utils/raf'import{ref,computed,typeRef}from'vue'//定义一......
  • vue3引入使用svg图标
    vue3使用svg图标安装//通过命令安装2个插件npmivite-plugin-svg-icons-Dnpmifast-glob-D在vue.config.js中配置//vue.config.jsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-v......
  • 摸鱼摸出来的vue3+element-plus毒蘑菇后台管理:新标签页的实现。
    在浏览器中,点击标签页右边的加号可以新加一个标签页,所以,在毒蘑菇后台管理(简称毒蘑菇儿)中也可以这样操作。点击标签页右边的+按钮就可以打开一个新标签页了,可以打开多个,互不冲突,在新标签页中可以搜索你想要打开的页面,点击后会将该标签页替换成你点击后的页面(跟浏览器操作一致)。点......
  • vue 将百度地图或者高德地图组件化
    一、前言百度地图已经有了react相关的组件库,本人用的百度地图v3.0和vue3我仅仅是抛砖引玉,百度地图webgl、高德地图都是一样的,因为底层都是通过js控制地图如果用组件的方式开发,比如我将BMap.Marker作为一个组件,我暴露一个参数position,其目的是控制BMap.Marker位置......
  • vue3+ts打开echarts的正确方式
    实例项目使用vite5+vue3+ts,项目地址vite-vue3-charts,预览地址https://weizwz.com/vite-vue3-charts准备工作1.注册为百度地图开发者官网地址,然后在应用管理->我的应用里,创建应用,创建好后复制AK2.在根目录的index.html里引入百度地图<head><metacharse......
  • vue中get和post请求
    vue中和后台交互,首先要引用vue-resource.jsvue-resource.js是专门和后台进行交互<!--==============引入vue-resource插件=================--><scriptsrc="../js/vueJs/vue-resource.js"></script>vue中get请求functiongetRequest(url,params){returnnewPromis......
  • vue3+lottie实现动画
    1、安装lottie-webnpmilottie-web2、使用在线json文件<template><divclass="box"><divid="lottie_box"style="width:800px;height:800px;margin-left:1000px;background-color:pink"></div><butt......
  • Vue中$router.push()路由切换、如何传参和获取参数 和获取不到$router.push 参数问题
    路由的两种传参方式:  一:声明式<router-link:to="{path:'/login'}">Home</router-link> 二:编程式$router.push(...) //该方法的参数可以是一个字符串路径,或者一个描述地址的对象。不带参数写法://字符串(对应填写上面的path) this.$router.push('/login') //对......