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

vue二进制下载

封装axios,/api/request

import axios from 'axios'
import store from '@/store'
import Vue from 'vue'
import { Message, MessageBox } from 'element-ui'import { getToken } from '@/utils/auth'axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const $axios = axios.create({// 设置超时时间timeout: 30000,// 基础url,会在请求url中自动添加前置链接baseURL: process.env.VUE_APP_BASE_API
})Vue.prototype.$http = axios // 并发请求
// 在全局请求和响应拦截器中添加请求状态// 请求拦截器
$axios.interceptors.request.use(config => {if (getToken()) {config.headers.Authorization = getToken() // 请求头部添加tokenconfig.headers.tenantId = store.getters.tenantId}return config},error => {return Promise.reject(error)}
)// 响应拦截器
$axios.interceptors.response.use(response => {if (response.headers['content-type'] === 'application/octet-stream') {return response}// if(response.headers['content-type'] ==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){//   return response// }if (response.headers['content-type'] !== 'application/json; charset=utf-8') {return response}const res = response.data || resif (res.success || res.data || res.result_code === 'SUCCESS') {return Promise.resolve(res)} else {return Promise.reject(res)}},error => {let code = ''if (error && error.response) {code = error.response.status}if (code === 401) {return MessageBox.confirm('登录状态已过期,请重新登录','系统提示',{confirmButtonText: '重新登录',type: 'warning'}).then(() => {store.dispatch('LoginOut').then(() => {location.reload() // 为了重新实例化vue-router对象 避免bug})return Promise.reject(new Error('正在为您跳转登录页!'))}).catch(() => {return Promise.reject(new Error('登录过期,请您重新登录!'))})} else if (code === 404) {Message({message: '网络请求不存在!',type: 'error',duration: 5 * 1000})} else if (code === 429) {return Promise.reject(new Error('访问频繁!'))} else if (code === 403) {return Promise.reject(new Error('很抱歉,您的访问权限等级不够,联系管理员!'))} else {return Promise.reject(error || new Error('请求超时'))}}
)// Content-Type
// 'application/json; charset=UTF-8'
// 'Content-Type': 'multipart/form-data' 需要在表单中上传文件以二进制流的方式传递数据
// 'application/x-www-form-urlencoded; charset=UTF-8'  以键值对的方式传递参数
// responseType: 'blob'                 接收文件流
export default $axios

引入/api/request,写接口 

import request from './request'
export function exportReport(data) {return request({method: 'post',url: '/api/ExportExcel/Export',data,responseType: 'blob'})
}

下载

<el-button type="primary" :loading="isDownloading" @click="exportHandle()">导出</el-button>// 导出
exportHandle() {if (this.isDownloading) returnthis.isDownloading = trueconst params = {export_name: 'StockSupplierData',...this.schData}const fileName = '列表' + getTimeStr()exportReport(params).then(res => {const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })if (window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveOrOpenBlob(blob, fileName + '.xlsx')this.isDownloading = false} else {const href = window.URL.createObjectURL(blob) // 创建下载的链接const a = document.createElement('a')a.style.display = 'none'a.download = fileName + '.xlsx'a.href = hrefdocument.body.appendChild(a) // 修复firefox中无法触发clicka.click()document.body.removeChild(a)this.isDownloading = false}}).catch(err => {this.isDownloading = falsethis.$message.error(err.msg || err.message || '导出失败')})
}
// getTimeStr是封装的时间戳
export function getTimeStr() {let date = new Date()let str = '' +date.getFullYear() +padStart((date.getMonth() + 1)) +padStart(date.getDate()) +padStart(date.getHours()) +padStart(date.getMinutes()) +padStart(date.getSeconds())return str
}

或者

axios.post('xxx/api/xxx',{...params},{responselype: 'blob',headers: {'Authorization': getToken()}}
).then(res => {console.log('res', res)
}).catch(err => {console.log('err', err)
})

 

 

 

相关文章:

vue二进制下载

封装axios&#xff0c;/api/request import axios from axios import store from /store import Vue from vue import { Message, MessageBox } from element-uiimport { getToken } from /utils/authaxios.defaults.headers[Content-Type] application/json;charsetutf-8 co…...

c++QT文件操作

1 介绍 QT的文件操作来源于其抽象基类QIODevice&#xff0c;中用于处理输入输出设备。提供了统一的接口来处理不同类型的数据源&#xff0c;如文件、套接字、缓冲区等。QIODevice 主要用于读取和写入数据&#xff0c;无论数据来自何种源头&#xff0c;都可以通过 QIODevice 统一…...

Jmeter —— jmeter设置HTTP信息头管理器模拟请求头

HTTP信息头管理器 HTTP信息头管理器是在有需要模拟请求头部的时候进行设置的&#xff0c;添加方式 是 右击线程组 -- 配置元件 -- HTTP信息头管理器 可以通过抓包工具或者F12获取http请求的header头部信息&#xff1b;如下图&#xff1a; 复制并点击jmeter中的从剪贴板添加&am…...

vue 图片转pdf

尝试了集中图片转pdf的方式&#xff0c; &#xff08;1&#xff09;最终较为优秀的一种是使用jspdf将图片转为pdf&#xff0c;支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换&#xff0c;详见我的另一篇文章&#xff1a; https://blog.csdn.net/Ann_52547/article/details/1322149…...

20.5 HTML 媒体

1. video视频标签 video视频标签: 是HTML中用于在网页上嵌入视频的元素.常用的视频标签属性: - src属性: 指定视频文件的URL地址. - controls属性: 用于显示视频播放控件(如播放按钮, 进度条等), 使用户能够控制视频的播放. - width和height: 指定视频的宽度和高度. - autopla…...

科大讯飞分类算法挑战赛2023的一些经验总结

引言: ResNet是he kaiming大佬的早年神作&#xff0c;当年直接刷榜各大图像分类任务。ResNet是一种残差网络&#xff0c;咱们可以把它理解为一个子网络&#xff0c;这个子网络经过堆叠可以构成一个很深的网络&#xff0c;而ResNext在其基础上&#xff0c;进行了一定修改完善&am…...

2023年京东按摩仪行业数据分析(京东销售数据分析)

近年来&#xff0c;小家电行业凭借功能与颜值&#xff0c;取代黑电和白电&#xff0c;成为家电市场的主要增长点。在这一市场背景下&#xff0c;颜值更高、功能更丰富、品种更齐全的各类按摩仪&#xff0c;借助新消费和电子商务的风潮&#xff0c;陆续被推上市场。今年&#xf…...

【C语言】进阶指针,超详解,含丰富代码示例

文章目录 前言指针进阶的重点内容1.字符指针2.数组指针3.指针数组4.函数指针5.函数指针数组6. 指向函数指针数组的指针 总结 这里是初阶的链接&#xff0c;方便大家对照查看&#xff01;&#xff01;&#xff01;添加链接描述 前言 大家好呀&#xff0c;今天和大家将指针进阶…...

wireshark入门指北

文章目录 前言安装Linux上wireshark安装 使用捕获的时候添加过滤条件抓取浏览器https内容 附录抓取非浏览器的https流量 前言 本文长期维护&#xff0c;记录使用wireshark的使用过程。 虽然有官方文档-Wireshark User’s Guide&#xff0c;但是不想去慢慢读。应用层的图形软件…...

18、SQL注入之堆叠及WAF绕过注入

目录 堆叠查询注入WAF绕过-SQL注入简要讲解安全狗、宝塔等防护waf策略规则大小写和关键字替换加密解密编码解码等价函数特殊符号反序列化注释符混用更改提交方式Fuzz大法数据库特性垃圾数据溢出HTTP参数污染 实测简易CMS头部注入漏洞Bypass原理分析 堆叠查询注入 stacked inje…...

nodejs+vue+elementui+express旅游出行指南网站_655ms

本文主要介绍了一种基于windows平台实现的旅游出行指南。该系统为用户找到景点信息和酒店信息提供了更安全、更高效、更便捷的途径。本系统有两个角色&#xff1a;管理员和用户&#xff0c;要求具备以下功能&#xff1a; &#xff08;1&#xff09;用户可以浏览主页了解旅游出行…...

【心电图信号压缩】ECG信号压缩与通过三次样条近似重建的ECG信号压缩研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

matlab使用教程(11)—创建随机数

MATLAB 使用算法来生成伪随机数和伪独立数。这些数在数学意义上并非严格随机和独立的&#xff0c;但它们能够通过各种随机和独立统计测试&#xff0c;并且其计算可以重复&#xff0c;方便用于测试或诊断目的。 rand 、 randi 、 randn 和 randperm 函数是创建随机数数组的主要…...

一、安全世界观

文章目录 1、 Web安全简史1.1 中国黑客简史1.2 黑客技术的发展历程1.3 web安全的兴起 2、黑帽子、白帽子3、安全的本质4、安全三要素5、如何实施安全评估5.1 资产等级划分5.2 威胁分析5.3 风险分析5.4 设计安全方案 6、白帽子兵法6.1 Secure By Default6.2 纵深防御原则6.3 数据…...

爬虫014_文件操作_打开关闭_读写_序列化_反序列化---python工作笔记033

报错,没有指定路径,没有指定路径无法创建文件 这样可以在当前目录下创建一个可写的文件 可以看到找到刚才生成的文件,看看内容...

企业前后端分离软件架构如何设计?

企业前后端分离软件架构的设计涉及到前端和后端的独立性、通信方式、数据流管理等多个方面。下面我将为你介绍一个常见的前后端分离软件架构设计&#xff1a; 1、前端层&#xff1a; 框架选择&#xff1a;选择适合项目需求的前端框架&#xff0c;例如React、Vue.js、Angular等…...

生产执行MES系统:提升企业灵活性和响应速度的关键利器

在竞争激烈的市场环境下&#xff0c;企业需要不断提高其灵活性和响应速度&#xff0c;以适应快速变化的需求和市场动态。生产执行MES&#xff08;Manufacturing Execution System&#xff09;系统作为信息技术的重要应用&#xff0c;为企业提供了强大的工具和平台&#xff0c;能…...

什么是分布式系统,如何学习分布式系统

正文 虽然本人在前面也写过好几篇分布式系统相关的文章&#xff0c;主要包CAP理论&#xff0c;分布式储存与分布式事务&#xff0c;但对于分布式系统&#xff0c;并没有一个跟清晰的概念。分布式系统涉及到很多的技术、理论与协议&#xff0c;很多人也说&#xff0c;分布式系统…...

数据库锁表 Lock wait timeout exceeded; try restarting transaction

锁等待超时 Lock wait timeout exceeded; try restarting transaction&#xff0c;是当前事务在等待其它事务释放锁资源造成的 解决办法 1、数据库中执行如下sql&#xff0c;查看当前数据库的线程情况&#xff1a; show full PROCESSLIST2、再到 INNODB_TRX 事务表中查看&…...

Oracle 知识篇+分区表上的索引由global改为local注意事项

★ 知识点 二、知识点 Local型索引有如下优点 1.Only one index partition must be rebuilt when a maintenance operation other than SPLIT PARTITION or ADD PARTITION is performed on an underlying table partition. 2.The duration of a partition maintenance opera…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...