前端vue/h5下载Springboot后端静态资源(txt/word/excel)

1.首先Springboot需要配置跨域和静态资源static目录存放对应的资源文件(txt等)

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
@Configuration
public class CorsConfig {
 
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        org.springframework.web.cors.UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
 
}

2.此时静态资源txt已经可以访问了通过 http://ip:port/项目名称/xxx.txt

3.前端h5/vue通过axios下载对应地址内容即可

this.$axios({
        method: "get",
        url: url,
        responseType: "blob",
      })
        .then(function (response) {
            //下载
            let data = response.data;
            if (!data) {
              return;
            }
            var blob = new Blob([data], {
              type: "text/plain;charset=UTF-8",
            });
            var url = window.URL.createObjectURL(blob);
            var aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = url;
            aLink.setAttribute("download", "xxx.txt");
            document.body.appendChild(aLink);
            aLink.click();
            //下载完成移除元素
            document.body.removeChild(aLink);
            //释放掉blob对象
            window.URL.revokeObjectURL(url);
    
        })
        .catch(error => {
          console.log(error);
        });

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值