当前位置: 首页 > 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…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

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

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

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...