首页 > 其他分享 >vue 文件流导出获取后端文件名称

vue 文件流导出获取后端文件名称

时间:2022-10-31 20:01:42浏览次数:74  
标签:vue const 导出 fileName link blob 文件名称 import response

response.addHeader("Content-Disposition","attachment;filename=" + java.net.URLEncoder.encode(filename, "UTF-8"));
在后端的接口中开放这个这个响应头,前端的response就可以获取到了

import axios from "axios"; import { ElNotification } from "element-plus"; import { useUserStore } from "@/store/modules/user"; let baseUrl = import.meta.env.VITE_APP_PREFIX; export const exportFile = (url, params) => { const userStore = useUserStore(); return new Promise((resolve, reject) => { axios({ url: baseUrl + url, method: "post", responseType: "blob", data: params, headers: { authorization: userStore.token ? `Bearer ${userStore.token}` : "", }, }).then((response) => { let dispositionStr = response.headers["content-disposition"]; if (dispositionStr == null || dispositionStr === "") { ElNotification({ title: "温馨提示", message: "导出失败", type: "error", }); reject("下载失败!"); return; } // 获取文件名 let dispositionArr = dispositionStr.split(";"); let fileName = decodeURIComponent(dispositionArr[1]); fileName = fileName.split("=")[1]; const blob = new Blob([response.data], { type: "application/vnd.ms-excel", }); const link = document.createElement("a"); link.href = window.URL.createObjectURL(blob); link.download =fileName; document.body.appendChild(link); link.click(); window.setTimeout(function () { window.URL.revokeObjectURL(blob); document.body.removeChild(link); ElNotification({ title: "温馨提示", message: "导出成功", type: "success", }); resolve() }, 0); }); }); };

 

标签:vue,const,导出,fileName,link,blob,文件名称,import,response
From: https://www.cnblogs.com/vhen/p/16845548.html

相关文章

  • [Vue]局域网无法访问
    1.新建VUE项目局域网无法访问修改package.json文件#重新初始化npminstall#启动项目npmrundevVITEv3.2.2readyin323ms➜Local:http://10.......
  • vue项目创建
    Vue项目vue项目创建创建vue项目在确认的路径下输入命令vuecreatemyfirstvueide的选择vscode,webstorm:jetbrains公司的,跟pycharm一家的,使用习惯一样选择使用......
  • 使用Vue来制作导航栏超级简单
    在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂。而使用Vue来制作你会发现异常简单话不多说上代码 css代码随便写一写样式  HTML部分,要给div......
  • vue之项目和其他操作
    一、vue项目目录介绍myfirstvue#项目名字node_modules#文件夹,内部有很多当前项目依赖的模块,可以删除,npminstallpublic......
  • vue.js拓展无法启用
    vue.js拓展无法启用这里我以自己的谷歌浏览器演示C:\Users\维磊\AppData\Local\Google\Chrome\UserData\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.4.5_0......
  • vue指令方式实现element table高度随浏览器和部分dom变化适应
    主要代码v-resize="resetTableHeight"//监听高度变化resetTableHeight(){//监听到searchArea高度变化使ivu-table-body高度发生改变if(document.getElements......
  • vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
    在使用vuets语言开发项目的过程中,会遇到,导入vue文件后,提示 找不到模块‘xxx.vue’或其相应的类型声明。(Vue3cannotfindmodule)解决方式:在项目根目录新建一个......
  • Springboot导出word,动态填充表格数据
    原文链接:https://blog.csdn.net/qq_23126581/article/details/125446459背景本文将给大家带来如何导入数据到word文档中,固定传值和动态制作表格传值等。依赖:<!-......
  • vue-cli项目中,rouer-link点击后无效
    昨日,重构我的vue-cli项目,但是在使用router-link时发现,无论如何点击其都不起反应。症状:鼠标左键点击无效鼠标移上后,(谷歌)浏览器左下角正常显示链接网址网页解析正常,​​<route......
  • vue-cli项目报错:Maximum call stack size exceeded
    ​​Maximumcallstacksizeexceeded​​这个错误,看得出是说调用栈溢出,一般来说自己的代码不至于让调用栈溢出吧,所以这个错误往往是因为循环调用而导致的一种调用循环。即......