从HTML页面下载文件是非常简单的，直接向后端发起请求，后端处理请求就可以了；但是如果前端使用Vue开发，那么实现文件下载就有些曲折：Vue前端本身作为服务端存在，为了实现下载就需要将请求通过代理转到后端服务器，后端服务器将文件响应给Vue前端服务器，Vue前端服务器再实现下载，具体实现如下：
后端代码：
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();}}
}
前端代码：
<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.dataconst blob = new Blob([content])if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a') // 创建一个a标签通过a标签的点击事件区下载文件elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob) // 使用blob创建一个指向类型数组的URLdocument.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>
)
