vue 项目中 zip 压缩包文件下载

参考文章@胡新fa ①文件下载流程
参考文章@Mr.裴 ②压缩包下载打不开问题
參考文章@sqwu

注意 : 一定要在接口中配置 responseType:‘blob’ 该属性; headers 根据需求添加.
{
responseType: ‘blob’,
headers: { ‘request-module’: ‘app_info’ }
}

a标签下载相关知识：

参考文章@GQguoqi

大佬代码://必须加上responseType，因为下载的zip属于流和普通的下载方式还是有较大区别的
export function Export(data) {return request({url: '',method: '',responseType: 'blob', //必须在接口中配置 responseType 属性.headers:{ 'Content-Type': 'application/json; application/octet-stream'},data: data})
}<!--第一步 --!>
<sapn @click='handleExport'>下载zip压缩包</span>
<!--第二步 --!>
import { getApplyInfoExport } from  ''
<!--第三步 --!>handleExport() {let data = ''this.$confirm("是否确认导出所有数据?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(function() {return getApplyInfoExport(data);}).then(response => {let blob = new Blob([response.data], {type: 'application/zip'})let url = window.URL.createObjectURL(blob)const link = document.createElement('a') // 创建a标签link.href = urllink.download = '' // 重命名文件link.click()URL.revokeObjectURL(url) // 释放内存}).catch(function(err) {console.log(err)});},

我根据大佬的代码  封装了一个 api:
fileHandle(data, fileName) {let blob = new Blob([data], { type: 'application/zip' })let url = window.URL.createObjectURL(blob)const link = document.createElement('a') // 创建a标签link.href = urllink.download = fileName // 重命名文件link.click()URL.revokeObjectURL(url) // 释放内存}使用时调用:
//点击事件
downLoadHandle() {//后端给的压缩包接口zipDownLoad().then(res => {//大佬封装的方法this.fileHandle(res.data,"资产标签卡.zip")})},

下载文件后处理content-disposition，响应fileName。

下面方法可能会获取不到 content-disposition 字段，解决办法参考下面文章。

参考文章@GQguoqi

//前端可以这样获取 content-disposition 字段，然后加以处理。axois.get().then(res => {let filename = res.headers['content-disposition'].split(';')[1].split('filename=')[1]})// 如果获取不到 content-disposition 字段  需要后端做以下配置。
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
response.setHeader("Content-Disposition","attachment;filename="+fileNameEncoder);
注意大小写，都是Content-Disposition，我之前一个大驼峰，一个全小写失败了。

vue 项目中 zip 压缩包文件下载相关推荐

使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
vue项目中阿里图标的使用
vue项目中阿里图标的使用在项目中使用阿里图标,先去阿里图标网站(https://www.iconfont.cn/),找到自己想要的图标,添加到一个新建项目中,然后选择Font class,点击下载 ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...

vue 项目中 zip 压缩包文件下载

vue 项目中 zip 压缩包文件下载

下载文件后处理content-disposition，响应fileName。

vue 项目中 zip 压缩包文件下载相关推荐

最新文章

热门文章