Vue前端如何配合SpringBoot后端实现文件下载

从HTML页面下载文件是非常简单的,直接向后端发起请求,后端处理请求就可以了;但是如果前端使用Vue开发,那么实现文件下载就有些曲折:Vue前端本身作为服务端存在,为了实现下载就需要将请求通过代理转到后端服务器,后端服务器将文件响应给Vue前端服务器,Vue前端服务器再实现下载,具体实现如下:

后端代码:

java 复制代码
package com.soft.backend;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.InputStream;
import java.nio.file.Files;

@Controller
@RequestMapping("/api/file")
public class FileController {

    @RequestMapping("/download")
    public void download(String fileName, HttpServletResponse response) throws Exception {
        ServletOutputStream out = null;
        ByteArrayOutputStream baos = null;
        try {
            //通过输入流获取图片数据
            InputStream inStream = Files.newInputStream(new File("D:\\1.mp4").toPath());
            byte[] buffer = new byte[1024];
            baos = new ByteArrayOutputStream();
            int len;
            while ((len = inStream.read(buffer)) != -1) {
                baos.write(buffer, 0, len);
            }
            response.addHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes("utf-8"),"iso-8859-1"));
            response.addHeader("Content-Length", "" + baos.size());
            response.setHeader("filename", fileName);
            response.setContentType("application/octet-stream");
            out = response.getOutputStream();
            out.write(baos.toByteArray());
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            baos.flush();
            baos.close();
            out.flush();
            out.close();
        }
    }
}

前端代码:

vue 复制代码
<template>
	<div>
		<button type="button" @click="download">下载</button>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		name: 'App',
		methods: {
			download() {
				var fileName="视频.mp4";
				axios(`/api/file/download`, {
					headers: {
						'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
						'Content-Type': 'application/octet-stream'
					},
					methods: 'get',
					params: {
						fileName: fileName,
					},
					responseType: 'blob'
				}).then((res) => {
					if (res.status === 200) {
						const content = res.data
						const blob = new Blob([content])
						if ('download' in document.createElement('a')) { // 非IE下载
							const elink = document.createElement('a') // 创建一个a标签通过a标签的点击事件区下载文件
							elink.download = fileName
							elink.style.display = 'none'
							elink.href = URL.createObjectURL(blob) // 使用blob创建一个指向类型数组的URL
							document.body.appendChild(elink)
							elink.click()
							URL.revokeObjectURL(elink.href) // 释放URL 对象
							document.body.removeChild(elink)
						} else { // IE10+下载
							navigator.msSaveBlob(blob, fileName)
						}
					}
				}).catch(res => {
					console.log(res)
				})
			}
		}
	}
</script>
相关推荐
paopaokaka_luck36 分钟前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml43 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~3 小时前
Spring Boot详解:从入门到精通
java·spring boot·后端
hong1616883 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis