vue从后台下载.zip压缩包文件
vue前后端分离,使用element的el-button组件从后台下载文件,并且解决乱码问题
1.添加下载按钮
2.(原始方法,会出现乱码)给按钮添加点击事件,添加接口代码
download: function() {const row = this.tableRadio// console.log(row)axios.get('/api/download', {params: {reportRuleId: row.reportRuleId}}).then(response => {console.log(response.data);}).catch(error => { this.$message.error(error) })
}
一直使用的是axios.get()这种请求方式,可以访问后台,但是返回的是一堆乱码
3.(更正版)用axios({})这种方式,配置参数:
根据返回的类型response.data.type,如果是文件流application/octet-stream则下载文件,如果是json则显示错误信息;
文件名来自http头部的Content-Disposition字段;
axios({method: 'GET',url: '/api/download',params: {reportRuleId: row.reportRuleId},responseType: 'blob'}).then(response => {if (response.data.type === 'application/octet-stream') {// 获取http头部的文件名信息,若无需重命名文件,将下面这行删去const fileName = response.headers['content-disposition'].split('=')[1]/* 兼容ie内核,360浏览器的兼容模式 */if (window.navigator && window.navigator.msSaveOrOpenBlob) {const blob = new Blob([response.data], { type: 'application/zip' })window.navigator.msSaveOrOpenBlob(blob, fileName)} else {/* 火狐谷歌的文件下载方式 */const blob = new Blob([response.data], { type: 'application/zip' })const url = window.URL.createObjectURL(blob)const link = document.createElement('a') // 创建a标签link.href = urllink.download = fileName // 文件重命名,若无需重命名,将该行删去link.click()URL.revokeObjectURL(url) // 释放内存}resolve(response)} else {const reader = new FileReader()reader.onload = function(event) {const msg = JSON.parse(reader.result).data_this.$errorMsg(message) // 将错误信息显示出来}reader.readAsText(response.data)}}).catch(error => _this.$errorMsg(error) )
这样就可以成功下载到.zip文件
4.报跨域问题
经过排查,我这边产生这个问题的原因是参数格式,如下图,我的参数存在一个JOSN字符串,导致报错
解决办法:使用qs模块将params参数格式转换一下 ,将下面这行代码放在params后面
paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'brackets' }) }
type:'application/zip'可以更改下载文件的类型,具体有以下这些类型
'doc' => 'application/msword',
'bin' => 'application/octet-stream',
'exe' => 'application/octet-stream',
'so' => 'application/octet-stream',
'dll' => 'application/octet-stream',
'pdf' => 'application/pdf',
'ai' => 'application/postscript',
'xls' => 'application/vnd.ms-excel',
'ppt' => 'application/vnd.ms-powerpoint',
'dir' => 'application/x-director',
'js' => 'application/x-javascript',
'swf' => 'application/x-shockwave-flash',
'xhtml' => 'application/xhtml+xml',
'xht' => 'application/xhtml+xml',
'zip' => 'application/zip',
'mid' => 'audio/midi',
'midi' => 'audio/midi',
'mp3' => 'audio/mpeg',
'rm' => 'audio/x-pn-realaudio',
'rpm' => 'audio/x-pn-realaudio-plugin',
'wav' => 'audio/x-wav',
'bmp' => 'image/bmp',
'gif' => 'image/gif',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'png' => 'image/png',
'css' => 'text/css',
'html' => 'text/html',
'htm' => 'text/html',
'txt' => 'text/plain',
'xsl' => 'text/xml',
'xml' => 'text/xml',
'mpeg' => 'video/mpeg',
'mpg' => 'video/mpeg',
'avi' => 'video/x-msvideo',
'movie' => 'video/x-sgi-movie',
vue从后台下载.zip压缩包文件相关推荐
- 微信小程序下载zip压缩包后解压,并且打开文件查看的内容
在开发pc端后台管理系统的时候,经常会遇到这样的需求:下载zip到本地,然后用户双击压缩包,并借助电脑端的压缩软件打开压缩包,就可以查看里面的word.excel.pdf文件里面的内容.(这种需求,毫 ...
- ajax请求 下载zip压缩包
ajax请求 下载zip压缩包 一.后台代码 二.前端代码 问题 后台最主要是 response.setContentType("application/octet-stream" ...
- 能绕过密码解压ZIP压缩包文件嘛?
zip压缩包设置了加密,需要输入密码才能够解压文件,但是我们没有密码就没办法解压出文件,如果没有密码,有什么方法可以绕过密码直接解压文件吗?答案是 没有办法. 想要解密zip压缩包文件的密码,我们还是 ...
- 下载ZIP压缩包(压缩多个文件)
下面的方法是将图片服务器或者文件服务器的多个文件,并压缩成zip包,提供下载功能/*** 获取 文件 流* @param url* @return* @throws IOException*/ pri ...
- 使用JohnTheRipper对有密码加密的ZIP压缩包文件进行暴力破解
背景 对加密的ZIP压缩包进行密码破解的方式有很多,网上也有很多文章,今天只介绍一种--JohnTheRipper. JohnTheRipper 摘自百度百科: John the Ripper,是一个 ...
- ZIP压缩包文件删除密码的方法
压缩包想要删除密码,一般来说是将压缩包文件解压然后重新压缩,重新压缩的压缩包不要设置密码,这就相当于是删除了压缩包的密码. 但是zip格式的压缩包还有另一种删除密码的方法,如下: 右键压缩包,然后选择 ...
- vue blob流下载zip文件,下载后包文件显示文件损坏
今天遇到一个问题,就是下载的zip文件打不开,一直显示文件被损坏. 本来觉得是后端的问题,但是排除了好久,确实没有问题,postman也实验成功. 后来发现系统main.js中引入了mock数据,影响 ...
- Cocos2dx-Lua 使用Curl下载zip压缩文件并解压
因为工作上的需求要用到异步下载文件并解压使用,在网上找了一部分资料,发现好多都是零碎的,所以我在这里做个整合.(51开源时代) 首先还是要感谢 @iuoon 大佬提供的CurlDown源码和 @zsi ...
- Vue 跨域下载或读取文件
image.png 下载文件 export async function download(file_url, file_name) {let res = await Axios({method: & ...
- 从GitHub上面下载zip压缩包很慢怎么办
推荐一个用起来还可以的网站:https://g.widora.cn/ 使用步骤: 1.复制的github上面的zip包下载地址 2.把地址粘贴到该网站的中间输入框内 3.点击获取链接,会显示" ...
最新文章
- 独家 | 17篇手把手教技术指南、技术进阶干货大合集
- 使用PowerShell 监控运行时间和连接情况
- ip guard保证java代码安全_IP-guard加密新增四大功能 让一“密“防百疏
- C语言getch()函数学习
- context switch的切换过程(TTBR0的切换/ASID的介绍)
- 2022-03-16
- [转载] C#面向对象设计模式纵横谈——25 设计模式总结
- Guava翻译系列之EventBus
- 如何在vue项目中使用sass(scss)
- python匿名函数(lambda)
- hql取满足条件最新一条记录_数据仓库怎么做拉链表记录数据变化情况,看看这篇文章 就明白了...
- git checkoutbranch 回退到某个版本进行修改
- Opengl编程指南第二章:状态管理、几何绘图
- 阿里云智能 AIoT 首席科学家丁险峰:阿里全面进军 IoT 这一年 | 问底中国 IT 技术演进
- 引汉济渭:再续秦人治水神话_陕南赤子_新浪博客
- [随笔] flex 布局使用 space-between 尾行排版效果优化
- 结束 oracle 锁 ps -ef|grepp.spid,oracle 解锁表剔除去session 和kill
- vivo手机系统打印服务器,原来vivo手机自带扫描功能,文件瞬间电子化!几千的扫描仪省下了...
- 学生学籍管理系统_管理员登陆对学生的信息进行操作
- python中的screen blit_什么是python中的surface.blit()函数?它有什么作用?这个怎么运作?...
热门文章
- linux 叫号程序,linux socket编程有关问题,上面是小弟我做的一个简单的模拟银行排队叫号系统...
- python七大神级插件_Maya神级插件 SOuP 和OpenVDB
- java集成Cplex:Cplex下载、IDEA环境搭建、docker部署
- 北京的雾霾是大风吹走的吗
- 读书笔记 -《硅谷之火》《硅谷热》
- 程序员需知的 58 个网站
- FF14 界面 字变得很小 一种适用于高分辨率笔记本或屏幕下FF14窗口或无边框模式的性能优化方法
- vb杨辉三角代码编写_杨辉三角算法集锦vb
- 《机器视觉算法与应用》第3章 机器视觉算法之数据结构——学习笔记
- Android反编译工具