从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>