解决前端二进制流下载的文件(例如:excel)打不开的问题

news2024/11/16 0:29:02

1. 现在后端请求数据后,返回了一个二进制的数据,我们要把它下载下来。

这是响应的数据:

2. 这是调用接口的地方:

    uploadOk(){
      if(this.files.length === 0){
        return this.$Message.warning("请选择上传文件!!!")
      }
      let formData = new FormData();
      formData.append("file", this.files[0]);  // 文件对象
      Api.uploadQuery(formData).then(response=>{
          // 文件的下载
            const blob = new Blob([response], {'content-type': "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",})
            saveAs(blob, "表格的名字.xlsx")
        })
      })
    },

 使用了file-saver插件:github地址

3. 这时如果直接下载的话,打开文件就会失败

4. 这时就必须要在调接口的时候做一下处理

  uploadQuery(data){
    return fetch({
      url: "/fast-finance-core-service/mm/insurance/pay/uploadQuery",
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data",
        dataType: "file"
      },
      responseType: 'arraybuffer',  // 这一行必须要加,不然文件就打不开
      data
    });
  }

responseType: 'arraybuffer', 这个必须要加!!!

5. 然后刷新,重新下载就可以了

效果:

 如果还没解决的话,建议看一下这篇文档 文章

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023-09-28 monetdb-databae的概念和作用-分析

摘要: 每个数据库对于db,schema以及user,role都有一套自己的设计, 不同数据库间对于相同名字的东西例如database和schema可以说南辕北辙, 例如mysql中schema其实是database的同义词. 本文分析monetdb的database的概念和作用 备份: https://stoneatom.yuque.com/staff-ft8n1u…

Android AMS——APP启动流程(三)

Android 应用启动方式主要有两种 , 冷启动和热启动。 冷启动:后台没有应用进程 , 需要先创建进程 , 然后启动 Activity ;热启动:后台有应用进程 , 不创建进程 , 直接启动 Activity ; 其实,还有一种温起动的方式,就是用户按了返回键退出应用,随后又从新启动,可是活…

JS三大运行时全面对比:Node.js vs Bun vs Deno

全文约 5100 字,预计阅读需要 15 分钟。 JavaScript 运行时是指执行 JavaScript 代码的环境。目前,JavaScript 生态中有三大运行时:Node.js、Bun、Deno。老牌运行时 Node.js 的霸主地位正受到 Deno 和 Bun 的挑战,下面就来看看这…

分析几道关于死锁的真题

以下四点是408中死锁这一节的内容,考频基本上为每年一道题,虽然一半以上的题目是关于银行家算法的不安全序列的送分题,但其中有几道题综合了这以下几个概念,如果现在不提前分析这几个概念之间的关系的话。可能考场上就是随便蒙一个…

华为云云耀云服务器L实例评测 | 实例使用教学之简单使用:通过命令行管理华为云云耀云服务器

华为云云耀云服务器L实例评测 | 实例使用教学之简单使用:通过命令行管理华为云云耀云服务器 介绍华为云云耀云服务器 华为云云耀云服务器 (目前已经全新升级为 华为云云耀云服务器L实例) 华为云云耀云服务器是什么华为云云耀云服务…

postgresql|数据库|数据库测试工具pgbench之使用

前言: 数据库是项目中的重要组件,也是一个基础的重要组件,其地位说是第一我想应该是没有什么太多问题的。 那么,数据库的设计这些方面是不用多说的,关键的第一步,主要是涉及数据库的部署方式,…

系统集成|第十章(笔记)

目录 第十章 质量管理10.1 项目质量管理概论10.2 主要过程10.2.1 规划质量管理10.2.2 实施质量保证10.2.3 质量控制 10.3 常见问题 上篇:第九章、成本管理 下篇:第十一章、人力资源管理 第十章 质量管理 10.1 项目质量管理概论 质量管理:指确…

探索古彝文AI识别技术:助力中国传统文化的传承与发扬

目录 ⭐️ 写在前面 ⭐️ 一、什么是古彝文 1.1 古彝文介绍 1.2 古彝文与其他古文字示例 1.3 古彝文的重要性 ⭐️二、AI识别技术的挑战与前景 2.1 挑战 2.2 前景 ⭐️三、合合信息AI识别技术 3.1 智能文字识别技术👍👍 3.2 古文识别应用 ⭐…

基于微信小程序的高校暑期社会实践小程序设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

堆的原理以及实现O(lgn)

大家好,我是蓝胖子,我一直相信编程是一门实践性的技术,其中算法也不例外,初学者可能往往对它可望而不可及,觉得很难,学了又忘,忘其实是由于没有真正搞懂算法的应用场景,所以我准备出…

uCOSIII实时操作系统(重入函数,调度算法,嵌入式系统中断)

目录 可重入函数和不可重入函数: 基于优先级的调度算法: 嵌入式系统中断: 可重入函数和不可重入函数: 函数可重入是指一函数可以被多个任务调用,而不需要担心在任务切换的过程中,代码的执行会产生错误的…

实用网站合集

目录 1.工具网站合集2.技术类合集1.技术网站2.C3.计算机相关4.Java5.前端 收藏夹里有很多好用的网站,分类整理下,方便日后使用。 1.工具网站合集 阿里巴巴图标库:图标资源。pexels:壁纸、视频。unsplash:壁纸。pixabay…

基于cv2识别图像实现jd滑动块验证

这里写目录标题 出现条件:解决方案:获取滑动的距离滑动验证 本教程无任何意向,纯纯的技术娱乐 虽然小概率出现问题,加入重试机制后,基本没出现过问题 注意:这里获取的距离与实际的距离不相同,本…

mysql面试题1:MySQL有哪些常见存储引擎?MySQL默认是哪个存储引擎?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:MySQL有哪些常见存储引擎? MySQL有以下几种常见的存储引擎&#xff1…

智慧公厕自动化保洁系统,让公共厕所实现7*24 持续整洁

随着科技的不断进步,越来越多的创新方案应用于各个领域,公共厕所的智慧化也不例外。本文重点介绍智慧公厕源头厂家广州中期科技有限公司,大量案例项目中所使用的智慧公厕自动化保洁系统,能有效地节省人力,并保持公共厕…

抽象轻松的java——简单的购物车系统

public class GoodsShop {public static void main(String[] args) {System.out.println("欢迎来到购物车管理系统");obj [] arr new obj[50];//obj[50]为购物车的数量上限obj obj new obj();//调用objScanner scanner new Scanner(System.in);//输入while (true)…

【C++14保姆级教程】数位分割符、函数返回值推导

文章目录 前言一、数位分割符(Digit Separators)1.1 数位分割符是什么?1.2 作用1.3 示例代码11.4 示例代码21.5 数位分隔符的优势 二、函数返回值推导(Function Return Type Deduction)2.1 函数返回值推导是什么&#…

[NOIP2011 提高组] 铺地毯

[NOIP2011 提高组] 铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯。一共有 n n n 张地毯,编号从 1 1 1 到 n n n。现在将这些地毯按照编号从小…

【LeetCode热题100】--142.环形链表II

142.环形链表II 使用哈希表: 遍历链表中的每个节点,并将它记录下来,一旦遇到了此前遍历过的节点,就可以判定链表中存在环 /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* …

Unity Urp无线延申的网格效果

无线延申的网格 该项目必须是再Urp项目 shader代码实现 Shader "Unlit/infTutorial1" {Properties{_Alpha ("Alpha", Range(0, 0.5)) 0.5}SubShader{Tags{"RenderPipeline""UniversalRenderPipeline""RenderType""…