前端通过new Blob下载文档流(下载zip或excel)

news/2024/12/22 20:50:51 标签: 前端, excel

当后端返回这样的预览:

前端该如何下载呢?首先在axios请求里,加入第三个参数{ responseType: ‘blob’ }。

proxy.$post(url, params, { responseType: 'blob' }).then((res)=>{
  downloadFormat(res)
});

然后在一个函数里处理返回,创建a标签来下载

// 这里是下载zip文件的处理

const downloadFormat = (res) => {
  if (!res.data) {
    return;
  }
  let stringName = res.headers['content-disposition'].split(';')[1];// 一般来说,文件名字后端都在返回头里,前后端可以约定文件名前用 @ 符号分隔,便于取值,用其他符号也可以。
  let fileName = stringName.split('=')[1];// 获取到了后缀名
  const blob = new Blob([res.data], { type: 'application/zip' }); // application/zip就是设置下载类型,需要设置什么类型可在标题二处查看,
  const url = window.URL.createObjectURL(blob); // 设置路径
  const link = window.document.createElement('a'); // 创建a标签
  link.href = url;
  link.setAttribute('download', fileName); // 给下载后的文件命名
  link.style.display = 'none';
  link.click();
  URL.revokeObjectURL(url); // 释放内存
}

// 这里是下载excel的处理, 可根据需要传文件名和文件类型

const downloadFormat = (res, fileName, fileType) => {

  let stringName = res.headers['content-disposition'].split(';')[1];
  let fileName = stringName.split('=')[1];

  const blob = new Blob([res.data], { type: fileType ?? 'application/vnd.ms-excel' });

  // application/vnd.ms-excel 表示.xls文件
  // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 表示.xlsx文件
  
  // 也可以不写type,反正是下载,又不是上传。

  if (!blob) {
    return;
  }

  const url = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', fileName);

  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(url); // 为了性能和内存使用状况,应该在适当的时候释放url
}

还有一种get方式通过window.location.href来下载文件,在浏览器F12网络里预览和响应没有返回值,写法如下

window.location.href = '/api/exportData?ids=' + 拼接的参数

其中/api被代理转发了,在vite.config.js文件里config.server.proxy对象配置如下:

"/api": {
  target: "https://test.XXX.net",
  secure: false,
  changeOrigin: true,
}

// 真实请求地址含api,并未被reWrite为空

http://www.niftyadmin.cn/n/5795853.html

相关文章

MapBox实现深蓝色科技风格底图方案

先来简单看一下效果: 当然你也可以根据自己的喜好去调整颜色: 而且我亲自测试不会影响其他的图层效果。 因为mapbox到目前为止的3.8.0版本不像openlayers那样能够灵活的操作图层。因此在mapbox中通过修改天地图去改变其底图色彩样式就变得比较困难。 我们都知道(不知道 的…

【多维DP】【准NOI难度】力扣3251. 单调数组对的数目 II

给你一个长度为 n 的 正 整数数组 nums 。 如果两个 非负 整数数组 (arr1, arr2) 满足以下条件&#xff0c;我们称它们是 单调 数组对&#xff1a; 两个数组的长度都是 n 。 arr1 是单调 非递减 的&#xff0c;换句话说 arr1[0] < arr1[1] < … < arr1[n - 1] 。 ar…

前端零基础学习Day-Eight

CSS字体和文本样式 CSS文字样式 字体&#xff1a;font-family 语法&#xff1a;font-family:[字体1][,字体2][,…] p{font-family:“微软雅黑”,“宋体”,“黑体”;} 含空格字体名和中文&#xff0c;用英文引号括起 属性值&#xff1a;具体字体名&#xff0c;字体集 字体集&…

【GD32】从零开始学GD32单片机 | DAC数模转换器 + 三角波输出例程

目录 简介输出缓冲外部触发数据转换噪声波LSFR噪声模式三角噪声模式 例程 简介 上一篇讲解了ADC的使用&#xff0c;所以这一篇讲DAC的使用&#xff0c;两者其实就是互补的关系&#xff0c;ADC将模拟信号转为数字信号&#xff0c;而DAC将数字信号转为模拟信号。具体的使用上DAC…

day11|150,239,347

150 其实不难&#xff0c;理解规律&#xff0c;遇到符号就需要提出来做运算。 class Solution {public int evalRPN(String[] tokens) {//向零截断&#xff0c;正数向下取整&#xff0c;负数向上取整//Queue<Integer> num new Queue<>()&#xff1b;是错的注意区…

数据结构:链表(经典算法例题)详解

目录 1.移除链表元素 2.反转链表 3.链表的中间结点 4.合并两个有序链表 5.环形链表的约瑟夫问题 6.分割链表 我以过客之名&#xff0c;祝你前程似锦 1.移除链表元素 &#xff08;1&#xff09;题目&#xff1a; https://leetcode.cn/problems/remove-linked-list-element…

Vue3 基础记录

Vue3 创建 基于vue-cli ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version## 安装或者升级你的vue/cli npm install -g vue/cli## 执行创建命令 vue create vue_test## 随后选择3.x ## Choose a version of Vue.js that you want to start the pr…

Golang学习历程【第三篇 基本数据类型类型转换】

Golang学习历程【第三篇 基本数据类型】 1. 总览2. 基本数据类型2.1 整型2.2 浮点型2.2 布尔型2.3 字符2.4 字符串2.4.1 常用定义方式2.4.2 转移字符2.4.3 常用方法2.4.3 字符串中字符替换 3. 类型转换3.1 整型与整型转化3.2 浮点数与整型转换3.3 其他类型与string类型转换3.4 …