当前位置: 首页 > article >正文

vue 处理二进制文件流下载,封装请求

在这里插入图片描述
后端返回的文件流
前端需要处理成下载文件
刚开始一直报错
在这里插入图片描述
处理的方法

// http.js
import instance from './axios';

export const get = (url, params = {}, config = {}) => instance.get(url, { params, ...config });

// api.js
/**
 * 获取下载错误信息
 * @param {string} batchId - 批次ID
 * @returns {Promise} - 返回一个Promise对象,用于异步获取服务器响应
 */
export const downloadErrorMessage = (batchId, config = {}) => {
  return get(`/admin/finance/enterprise-authorization/downloadErrorMessage/${batchId}`, {}, config);
};

重点就是config配置 responseType: ‘blob’

页面代码

  downloadErrorMessage(res.data.batchId, { responseType: 'blob' }).then((response) => {
                  // 处理二进制数据并创建 Blob 对象
                  const blobObj = new Blob([response.data], {
                    'content-type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
                  });
                  saveAs(blobObj, 'error.xls'); // 这个是用的插件,不用插件可以自己创建a标签
                  handleClose();
                  emits('init');
                });

插件使用
使用 npm 安装 FileSaver.js:

npm install file-saver --save

页面引入

import { saveAs } from 'file-saver';

不用插件可以用a标签代替


http://www.kler.cn/a/468352.html

相关文章:

  • create-a-weather-app-using-flask-python
  • pytorch张量列表索引和多维度张量索引比较
  • ElasticSearch10-性能优化
  • 左神算法基础巩固--2
  • 深入MySQL复杂查询优化技巧
  • Nginx:性能优化
  • 【MATLAB第112期】基于MATLAB的SHAP可解释神经网络回归模型(敏感性分析方法)
  • Hadoop•FinalShell连接VMware免密登录
  • centos7搭建大数据集群环境准备--安装java和scala环境
  • Lua语言的数据结构
  • (Pytorch)torch.autograd.grad()与torch.autograd.backward()
  • 爬取数据时如何设置合适的请求频率?
  • 八大排序算法,快排的三种递归非递归实现,归并的递归非递归实现,排序算法复杂度及稳定性分析【有图解】
  • Vue3实现PDF在线预览功能
  • 解析 SQL 中的 NULL 与比较操作:NULL 值与任何值的比较会返回 UNKNOWN
  • Visual Studio C++使用笔记
  • 【数学建模笔记】评价模型-基于熵权法的TOPSIS模型
  • PyTorch通过搭建LSTM网络,对MNIST手写数字数据集进行了训练和评估,实现了对手写数字的分类功能
  • 生成模型的现状2025年的新兴趋势
  • 手机投屏到电视的3种选择:无线本地投屏,无线远程投屏,AirPlay投屏