vue2 点击按钮下载文件保存到本地(后台返回的zip压缩流)

// import './mock/index.js';  // 该项目所有请求使用mockjs模拟 去掉mock
 页面url下载
  1. console.log('res', res)
  2. //token 是使页面不用去登录了
  3. if (res.file) {
  4. window.location.href =
  5. Vue.prototype.$config.VUE_APP_BASE_IDSWAPI +
  6. Vue.prototype.$config.VUE_APP_IDSW +
  7. '/service/models/download?action=zip&filepath=' +
  8. encodeURIComponent(encodeURIComponent(res['file'])) +
  9. `&token=${localStorage.getItem('inmsToken')}&accessToken=${localStorage.getItem('accessToken')}`
  10. }

responseType: "blob",   

let blob = new Blob([response.data], { type: "application/zip" }); //注意是response 或者 response.data
let url = window.URL.createObjectURL(blob);  这三句最重要!!!

  1. //普通代码
  2. axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
  3. // 创建Blob对象,设置文件类型
  4. let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
  5. let objectUrl = URL.createObjectURL(blob) // 创建URL
  6. location.href = objectUrl;
  7. URL.revokeObjectURL(objectUrl); // 释放内存
  8. })

  1. downloadAll() {
  2. axios({
  3. method: "get",
  4. url: "api/TemplateDownload/GetAllTemplateZIP",
  5. headers: {
  6. "content-type": "application/json; charset=utf-8",
  7. Authorization: Cookies.get("token") || "",
  8. },
  9. responseType: "blob",
  10. })
  11. .then((response) => {
  12. let blob = new Blob([response.data], { type: "application/zip" });
  13. let url = window.URL.createObjectURL(blob);
  14. const link = document.createElement("a"); // 创建a标签
  15. link.href = url;
  16. link.download = "模板下载"; // 重命名文件
  17. link.click();
  18. URL.revokeObjectURL(url); // 释放内存
  19. this.checkList = [];
  20. })
  21. .catch((error) => {
  22. console.log(error.data);
  23. });
  24. },
  25. //excel
  26. let blob = new Blob([response.data], { type: "application/vnd.ms-excel" });
  27. dl() {
  28. axios({
  29. method: "get",
  30. url: "http://10.180.170.3:8794/tRptMwStdClt/exportData?time=202104",
  31. responseType: "arraybuffer",
  32. })
  33. .then((response) => {
  34. console.log(response);
  35. let blob = new Blob([response.data], {
  36. type: "application/vnd.ms-excel",
  37. });
  38. let url = window.URL.createObjectURL(blob);
  39. const link = document.createElement("a"); // 创建a标签
  40. link.href = url;
  41. link.download = "模板下载"; // 重命名文件
  42. link.click();
  43. URL.revokeObjectURL(url); // 释放内存
  44. this.checkList = [];
  45. })
  46. .catch((error) => {
  47. console.log(error.data);
  48. });
  49. },

获取到了后台传过来的excel文件 前端用vue怎么接收并导出? - 中文 - Vue Forum

vue.js前端实现excel表格导出和获取headers里的信息 - 五个半柠檬 - OSCHINA - 中文开源技术交流社区

java后台需要设置

  1. response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
  2. response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
  3. 才能获取到文件名等信息

  1. // 导出execel2
  2. handleExcel() {
  3. this.$http({
  4. url: this.$http.adornUrl(url),
  5. method: "post",
  6. responseType: "blob",//!!!!
  7. params: this.$http.adornParams({
  8. userAccount: this.userName,
  9. }),
  10. }).then((res) => {
  11. // console.log(res, "res");
  12. let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
  13. let fileName = decodeURI(
  14. response.headers["content-disposition"].split(";")[1].split("=")[1]
  15. );
  16. let url = window.URL.createObjectURL(blob);
  17. const link = document.createElement("a"); // 创建a标签
  18. link.href = url;
  19. link.download = fileName; // 重命名文件
  20. link.click();
  21. URL.revokeObjectURL(url); // 释放内存
  22. });
  23. },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/419190.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jetson Orin Nano安装OpenCV带cuda加速版本的全过程

安装过程 使用jetpack安装的jetson,自带了opencv,但是没有cuda加速的,输入opencv_version 使用jtop查看,可以确认自带的opencv是没用cuda的 卸载opencv,先查看有哪些包 pip3 list | grep opencv opencv-python 然后卸…

python系列-输入输出关系运算符算术运算符

🌈个人主页: 会编程的果子君​💫个人格言:“成为自己未来的主人~” 目录 注释的语法 注释的规范 输入输出 通过控制台输出 通过控制台输入 运算符 算术运算符 关系运算符 注释的语法 python中有两种注释风格: 1.注释行:…

logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

5. Syslog-ng Syslog-ng 是一个开源的日志管理解决方案,主要用于收集和处理日志数据。它可以从多种源收集日志,包括系统日志、网络设备日志和第三方应用日志。 然后将日志解析、分类、重写和关联到统一格式中,然后将其存储或安全地传输到不同…

机器学习系统能在多大程度上理解数学

1.1 LLEMMA:一个开放的数学语言模型 论文地址:https://mathai2023.github.io/papers/45.pdf 代码地址:https://github.com/EleutherAI/math-lm 预训练数据集:https://huggingface.co/datasets/EleutherAI/proof-pile-2 文章提出了…

TensorRT模型优化部署 (八)--模型剪枝Pruning

系列文章目录 第一章 TensorRT优化部署(一)–TensorRT和ONNX基础 第二章 TensorRT优化部署(二)–剖析ONNX架构 第三章 TensorRT优化部署(三)–ONNX注册算子 第四章 TensorRT模型优化部署(四&am…

数据结构 | 红黑树

二叉搜索树 节点的左边比节点的值小,右边比节点的值大。 红黑树 红黑树的性质 节点要么是红色,要么是黑色根节点是黑色叶子节点都是黑色的空节点红黑树中红色节点的子节点都是黑色从任一节点到叶子节点的所有路径都包含相同数目的黑色节点 在添加或者…

git 常规操作及设置

git 常规操作及设置 Git是一个分布式版本控制系统,可以用来跟踪文件的修改历史并与其他人进行协作开发。下面是一些常见的Git操作及设置: 初始化仓库:使用命令git init在当前目录创建一个新的Git仓库。 克隆仓库:使用命令git clo…

第十一站:多态练习ODU

实现动态切换 ODU.h #pragma once #include <iostream> using namespace std; #define ODU_TYPE_311_FLAG "311" #define ODU_TYPE_335_FLAG "335" enum class ODU_TYPE {ODU_TYPE_311,ODU_TYPE_335,ODU_TYPE_UNKNOW };class ODU{ public:ODU();//发…

【ARM Cortex-M 系列 1.1 -- Cortex-M33 与 M4 差异 详细介绍】

请阅读【嵌入式开发学习必备专栏 之 Cortex-Mx 专栏】 文章目录 背景Cortex-M33 与 M4 差异Cortex-M33Cortex-M4关系和差异举例说明 背景 在移植 RT-Thread 到 瑞萨RA4M2&#xff08;Cortex-M33&#xff09;上时&#xff0c;遇到了hardfault 问题&#xff0c;最后使用了Cortex…

JAVA的基础面试题二

​ 1.描述Servlet调用过程&#xff1f; 答案&#xff1a; &#xff08;1&#xff09;在浏览器输入地址&#xff0c;浏览器先去查找hosts文件&#xff0c;将主机名翻译为ip地址&#xff0c;如果找不到就再去查询dns服务器将主机名翻译成ip地址。 &#xff08;2&#xff09;浏…

keil软件仿真

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要…

无法打开浏览器开发者工具的可能解决方法

网页地址: https://jx.xyflv.cc/?url视频地址url 我在抖音里面抓了一个视频地址, 获取到响应的json数据, 找到里面的视频地址信息 这个网站很好用: https://www.jsont.run/ 可以使用js语法对json对象操作, 找到所有视频的url地址 打开网页: https://jx.xyflv.cc/?urlhttps:…