vue+element+spring cloud file download (download) function + use of element slot
Scenes
The implementation process of the file download function is relatively simple, but the author has taken many detours in the process of implementation. Without further ado, let's go to the code
Vue code
Vue code display
<div style="width: 100%;height:83%;">
<el-table height="100%" width="100%" ref="moviesTable" :data="FileData">
<el-table-column type="index" label="序号" header-align="center" fixed align="center" width="70">
<template slot-scope="scope">
<span>{
{
scope.$index+1}}</span>
</template>
</el-table-column>
<el-table-column
prop="foldername"
label="文件名称"
header-align="center"
align="center"
max-width="280"
>
<template slot-scope="scope">
<el-button
@click.native.prevent="download (scope.row)"
type="text"
size="small"
>
{
{
scope.row.foldername}}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
js code display
//通过链接直接访问java端方法
download(row){
location.href = "http://localhost:1234/upload/downloadFile?newname="+row.newname
},
Java side code display
@Controller
@RequestMapping("/upload")
public class UploadController {
@Autowired
private UploadService uploadService;
//自定义静态属性展示路径，需要从这里访问需要下载的文件
public static String STATIC_PATH = "D:/fj/";
@Description("模板下载")
@RequestMapping("/downloadFile")
public String downloadFile(HttpServletRequest request,
HttpServletResponse response,
@RequestParam(value = "newname", required = false) String newname) {
String fileName = newname;// 设置文件名，根据业务需要替换成要下载的文件名//newname
if (fileName != null) {
//设置文件路径
String realPath = STATIC_PATH ;
File file = new File(realPath, fileName);
if (file.exists()) {
response.setContentType("application/force-download");// 设置强制下载不打开
try {
// 设置文件名,上传文件时在原文件名称前添加了14位当前时间的字符串，故截取十四位以后的文件名（时间转换为字符串格式详见上一篇博文）
response.addHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName.substring(14), "UTF-8"));
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
byte[] buffer = new byte[1024];
FileInputStream fis = null;
BufferedInputStream bis = null;
try {
fis = new FileInputStream(file);
bis = new BufferedInputStream(fis);
OutputStream os = response.getOutputStream();
int i = bis.read(buffer);
//实现文件下载
while (i != -1) {
os.write(buffer, 0, i);
i = bis.read(buffer);
}
System.out.println("success");
} catch (Exception e) {
e.printStackTrace();
} finally {
if (bis != null) {
try {
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (fis != null) {
try {
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
return null;
}
}
Show results
write at the end
The author is new to the vue element framework, and it is still in the development stage for Baidu programming.
In order to realize the file upload function of this article, I have referred to the blogs of many bloggers, and I would like to express my heartfelt thanks to the seniors.
If there is any infringing content, please contact the author to delete it in time