今天遇到了下载文件相关的问题,就是下载腾讯云COS回来的URL数据,一般同源的话直接一个简单的a标签处理没问题,所以我也是这么处理的,但是需求要求是下载的名称也要按上传的文件的名称(意思就是可以自定义),对于非同源的a标签的download属性不生效。
为啥我上传的时候名称好好的,回来名称就变了一串hash值串,原来是腾讯COS存储有一个相关的coskey作为键名方便存储,完事数据给返回了fileName前端拼一下。
这就需要把拿到的URL转变成一个blob格式的,再加上a标签那一套就可以完成重命名了。
//将一个url转化为blob格式的
const getBlob = (url) => {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
}
}
xhr.send()
})
}
//最简单a标签那一套
const saveAs = (blob, fileName) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
}
//最后就是事件了
const downFn=(record)=>{
getBlob(record.fileUrl).then((blob) => {
saveAs(blob, record.fileName)
})
}