前端Vue实现通过Minio返回的URL下载文件

諵溪丶 2024-07-14 09:03:04 阅读 57

最近在使用下载Minio实现下载文件时遇到的一些问题,前端直接点击后端返回的URL不可以调用下载而是直接预览,下面将我实现的方法分享:

1、数据库File表

2、通过文件id查询相关数据

FileController接口

在这里插入图片描述

FileServiceImpl实现类

在这里插入图片描述

在这里插入图片描述

4、前端这样操作:

<code>const fileId = '1783377440079638530'

downloadFile(fileId).then(res => {

if (res.code === '0000') {

// window.open(res.data)

const downloadLink = document.createElement('a')

// 将地址url转成blob地址

fetch(res.data.url).then(res => res.blob()).then(blob => {

downloadLink.href = URL.createObjectURL(blob)

// 下载文件的名称

downloadLink.download = res.data.fileName

document.body.appendChild(downloadLink)

downloadLink.click()

// 清除 占用的缓存资源

window.URL.revokeObjectURL(downloadLink.href)

document.body.removeChild(downloadLink)

})

}

})

5、点击相应按钮即可弹出下载框:下载文件、保存到电脑相应位置。

在这里插入图片描述



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。