admin管理员组文章数量:1606464
1. 实现如下功能
2. 首先我们先看点击下载按钮触发的方法
//点击下载按钮获取当前行数据内容,跳转后端实现业务处理
fileDownload(row) {
download({
fileName: row.fileName,
fileUrl: row.fileUrl,
fileHash: row.fileHash
})
},
3. 后端service层入参需加一个HttpServletResponse对象
public Result download(HttpServletResponse response, TestFile testFile) {
//获取文件hash一样的文件(hash相同代表是同一个文件)
List<TestFile > testFileHS = testFileMapper.selectList(new QueryWrapper<TestFile>()
.eq("file_hash",testFile.getFileHash())
// 获取testFileHS中的第一个对象并塞进file中
File file = new File(testFileHS .get(0).getFileUrl());
if (!file.exists()) {
return ResultUtil.error(ResultCode.FAIL.getCode(), "当前附件本地文件不存在!");
}
//设置请求头
response.setHeader("Content-Disposition", "attachment;filename=a.jpg");
//设置类型
response.setContentType("application/x-msdownload");
//设置编码
response.setCharacterEncoding("utf-8");
FileInputStream bis;
OutputStream os;
try {
//将file对象塞进一个输入流中
bis = new FileInputStream(file);
//创建一个byte对象
byte[] buff = new byte[1024];
//获取输出流
os = response.getOutputStream();
int i = 0;
//当file对象的输入流没有结束的时候,通过输出流写出
while ((i = bis.read(buff)) != -1) {
os.write(buff, 0, i);
}
bis.close();
os.close();
return ResultUtil.success();
} catch (IOException e) {
return ResultUtil.error(ResultCode.FAIL.getCode(), "下载失败!");
}
}
4.后端结束之后返回前端处理文件流
/**
1. 文件下载
2. @param params
*/
export function download(params) {
request({
url: '/cxk/jntm',
responseType: 'blob', // 表明返回服务器返回的数据类型
method: 'post',
data: params
}).then(result => {
//创建一个Blob对象接收后端传来的文件流
const blob = new Blob([result], {
type: 'application/octet-stream'
})
const downloadElement = document.createElement('a')
// 创建下载的链接
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
// 下载后文件名
downloadElement.download = params.fileName
document.body.appendChild(downloadElement)
// 点击下载
downloadElement.click()
// 下载完成移除元素
document.body.removeChild(downloadElement)
// 释放掉blob对象
window.URL.revokeObjectURL(href)
}).catch(err => {
this.$message.error(err.message)
})
}
好啦,到这里文件下载就结束了,另外fileHash这个东西是区别文件是否为同一个的,如果不做这个功能此步可以省略,觉得还不错的小伙伴可以点赞+收藏+转发,你的支持将会是我创作的动力,感谢有你!
版权声明:本文标题:elementUI组件Upload + VUE 实现文件下载功能 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728499049a1160975.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论