返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现zip文件下载
  • 740
分享到

vue实现zip文件下载

2024-04-02 19:04:59 740人浏览 安东尼
摘要

本文实例为大家分享了Vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 <el-button size="mini" type="succ

本文实例为大家分享了Vue实现zip文件下载的具体代码,供大家参考,具体内容如下

el-button按钮


<el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)">下载</el-button>

js处理说明

request 拦截器 request.js

axiOS 引入并创建 axios 实例,request 拦截器添加


import axios from 'axios'


// 创建axios实例
const service = axios.create({
  baseURL: '',    // api的baseURL
  timeout: 20000, // 请求超时时间
  params: {
 // 请求参数
  }
});

// request拦截器
service.interceptors.request.use(config => {
  // .... config 添加处理
  ......
  
  return config
}

export default service

request 拦截器在请求前处理,可以添加 Http headers 设置,例如:

1、HTTP Request Headers: token、cookie、session等值添加处理(config.headers[‘后台取值名称'] = ‘相关值';):

(1)config.headers[‘token'] = ‘token的值';
(2)config.headers[‘cookie'] = ‘cookie的值';
(3)config.headers[‘session'] = ‘session的值';

2、Headers post设置:如 Content-Type

上传文件使用:config.headers.post[‘Content-Type'] = ‘multipart/fORM-data';

zip文件下载

1、request.js 代码:


import axios from 'axios'


// 创建axios实例
const service = axios.create({
  baseURL: '',    // api的baseURL
  timeout: 20000, // 请求超时时间
  params: {
 // 请求参数
  }
});

// request拦截器
service.interceptors.request.use(config => {
  // config 添加 token 值
  config.headers['token'] = getToken();  // getToken()是我的获取值方法,系统校验使用
  return config
}

export default service

2、vue页面引用 request.js


import request from '@/utils/request'

下载处理


// fileName下载设置名称,fileLocation文件存储名称
downloadHandle(fileName,fileLocation) {
   let prome = {
     fileLocation: fileLocation
   }
   request.post(
    '/api/downloadFile', 
    prome, 
    {
      responseType: 'blob',
      timeout: 60000
    }
   ).then(response => {
     if (!response.size) {
       this.$message({
         message: '没有可下载文件',
         type: 'warning'
       })
       return
     }
     const url = window.URL.createObjectURL(new Blob([response]))
     const link = window.document.createElement('a')
     link.style.display = 'none'
     link.href = url
     link.setAttribute('download', fileName+'.zip')
     document.body.appendChild(link)
     link.click()
   }).catch((data) => {
     console.log(data)
   })
},

后台处理

根据请求 /api/downloadFile 后台 Java API 处理


package com.WEB.controller;

import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.httpservletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.Map;

@RestController
@RequestMapping("/api")
public class DownloadFileDemo {

    
    @RequestMapping(value = "/downloadFile")
    public void downloadFile(@RequestBody Map<String, Object> tranNap, HttpServletRequest request, HttpServletResponse response) {
        String fileLocation = tranNap.get("fileLocation")+"";
        try {
            String filePath = "D:/file/" + fileLocation + ".zip";
            //得到该文件
            File file = new File(filePath);
            if (!file.exists()) {
                System.out.println("[文件下载]没有可下载的文件");
                return;
            }
            FileInputStream fileInputStream = new FileInputStream(file);
            //设置Http响应头告诉浏览器下载文件名 Filename
            response.setHeader("Content-Disposition", "attachment;Filename=" + URLEncoder.encode(fileLocation+".zip", "UTF-8"));
            OutputStream outputStream = response.getOutputStream();
            byte[] bytes = new byte[2048];
            int len = 0;
            while ((len = fileInputStream.read(bytes)) > 0) {
                outputStream.write(bytes, 0, len);
            }
            fileInputStream.close();
            outputStream.close();
        } catch (Exception e) {
            System.out.println("[文件下载]下载文件异常");
            e.printStackTrace();
            return;
        }
    }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现zip文件下载

本文链接: https://lsjlt.com/news/133622.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue实现zip文件下载
    本文实例为大家分享了vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 <el-button size="mini" type="succ...
    99+
    2024-04-02
  • Android zip文件下载和解压实例
    下载:DownLoaderTask.java 代码如下:package com.johnny.testzipanddownload; import java.io.Buffe...
    99+
    2022-06-06
    zip 解压 Android
  • vue如何从后台下载.zip压缩包文件
    目录1.添加下载按钮2.(原始方法,会出现乱码)给按钮添加点击事件3.(更正版)用axios({})这种方式4.报跨域问题vue前后端分离,使用element的el-button组件...
    99+
    2024-04-02
  • vue实现文件上传和下载
    本文实例为大家分享了vue实现文件上传和下载的具体代码,供大家参考,具体内容如下 文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是...
    99+
    2024-04-02
  • vue+django实现下载文件的示例
    目录一、概述二、django项目三、vue项目一、概述 在项目中,点击下载按钮,就可以下载文件。 传统的下载链接一般是get方式,这种链接是公开的,可以任意下载。 在实际项目,某些...
    99+
    2024-04-02
  • js实现根据文件url批量压缩下载成zip包
    目录前言1. 所需包2. 安装3. 引入4. 完整代码解析使用5. 部分代码解析解析 Bolb 与 arraybuffer前言 项目开发中,产品经理提了这样一个需求:将系统中的附件实...
    99+
    2023-02-09
    js url批量压缩zip包 js url批量压缩
  • Vue实现文件上传和下载功能
    本文实例为大家分享了Vue实现文件上传和下载功能的具体代码,供大家参考,具体内容如下 1、a标签download属性 在H5中,为a标签新增了一个download属性,来直接文件的...
    99+
    2024-04-02
  • React和Vue实现文件下载进度条
    目录一、需求场景二、实现原理三、react 实现步骤1. 托管静态资源2. 封装hook3. 使用hook四、vue 实现步骤1. 托管静态资源2. 封装hook3. 使用hook五...
    99+
    2023-05-18
    React下载进度条 Vue下载进度条
  • 前端vue中怎么实现文件下载
    这篇文章主要介绍了前端vue中怎么实现文件下载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇前端vue中怎么实现文件下载文章都会有所收获,下面我们一起来看看吧。第一种方式 前端创建超链接,通过a标签向...
    99+
    2023-07-06
  • Android中实现下载和解压zip文件功能代码分享
    本文提供了2段Android代码,实现了从Android客户端下载ZIP文件并且实现ZIP文件的解压功能,非常实用,有需要的Android开发者可以尝试一下。 下载: Down...
    99+
    2022-06-06
    zip Android
  • Android实现文件下载
    前言 总体思路:下载文件到应用缓存路径,在相册创建文件夹,Copy过去,通知相册刷新。 下载文件到APP缓存路径,这样可避免Android高版本读取本地权限问题, 准备 impl...
    99+
    2024-04-02
  • thinkphp5实现文件下载
    public function download() { $famlePath = $_GET[‘resum’]; f i ...
    99+
    2023-09-01
    php
  • ASP.NETMVC实现文件下载
    思路 点击一个链接,把该文件的Id传递给控制器方法,遍历文件夹所有文件,根据ID找到对应文件,并返回FileResult类型。 与文件相关的Model: namespace MvcA...
    99+
    2022-11-13
    ASP.NET MVC 文件下载
  • Vue文件下载进度条的实现过程
    目录需求场景:实现原理:优化过程:下载方法的组件引入mixinVuex配置进度条最终效果图参考文章:需求场景: 1、大文件压缩过后依旧很大,接口返回response速度过慢,页面没有...
    99+
    2024-04-02
  • Vue实现文件批量打包压缩下载
    上次做了一个选择多个数据生成多个二维码并下载,当时项目催的紧,就简单写了个循环生成二维码下载,一次性会下载很多文件,特别难整理; 刚好这次项目又遇到类似这种功能,需要一次性批量下载多...
    99+
    2024-04-02
  • java 批量下载文件 打包成zip包
    创建DownLoadUrlStream承载数据 import lombok.Data;import java.io.InputStream;@Datapublic class DownLoadUrlS...
    99+
    2023-08-31
    java servlet 开发语言
  • Android实现下载zip压缩文件并解压的方法(附源码)
    前言 其实在网上有很多介绍下载文件或者解压zip文件的文章,但是两者结合的不多,所以这篇文章在此记录一下下载zip文件并直接解压的方法,直接上代码,文末有源码下载。 下载: ...
    99+
    2022-06-06
    方法 zip 解压 源码 Android
  • vue项目实现文件下载进度条功能
    平时业务中下载文件方式常见的有俩种: 第一种,直接访问服务器的文件地址,自动下载文件; 第二种 ,服务器返回blob文件流,再对文件流进行处理和下载。 一般小文件适用于第一种下载方案...
    99+
    2024-04-02
  • Python+django实现文件下载
    (1)方法一、直接用a标签的href+数据库中文件地址,即可下载。缺点:word excel是直接弹框下载,对于image txt 等文件的下载方式是直接在新页面打开。 (2)方法二、在python后台对下...
    99+
    2022-06-04
    文件 Python django
  • Android开发中怎么实现一个下载zip压缩文件的功能
    今天就跟大家聊聊有关Android开发中怎么实现一个下载zip压缩文件的功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。下载:import java.io.BufferedInpu...
    99+
    2023-05-31
    android roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作