VUE实现文件下载；zip文件也可以下载，干货

最新推荐文章于 2024-08-27 13:15:24 发布

Monica&Anthony

最新推荐文章于 2024-08-27 13:15:24 发布

阅读量5.5k

点赞数 3

分类专栏：趣学java

本文链接：https://blog.csdn.net/AntdonYu/article/details/106855450

版权

本文介绍如何使用Vue来实现文件下载功能，包括ZIP文件的下载。通过前端的method和后端的java API配合，详细阐述了具体的实现步骤。

摘要由CSDN通过智能技术生成


// vue 中的调用方法
 handleModelUpload() {
      alert('下载zip模板')
      axios({
        method: 'GET',
        url: '/business/api/download',
        // params: {
        //   // eslint-disable-next-line no-undef
        //   reportRuleId: row.reportRuleId
        // },
        responseType: 'blob'
      }).then(response => {
        const blob = new Blob([response.data], { type: 'application/zip' })
        const url = window.URL.createObjectURL(blob)
        window.location.href = url
      }).catch(error => this.$message.error(error) )
    },

如上图中的前端method，/bussiness 带代理我后台的 ip 实际getMapping的路径是/api/download。下面是后台的java api

package com.picchealth.mono.api;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.Rest