下载文件中碰到一个问题,服务器中存储的文件的链接中,文件名是加密转换过的字母和数字的结合,如果直接下载下载就是这串字母+数字,所以只能自定义命名了
页面按钮(这里我用了一个icon表示下载):
<div class="fs13 pr20">
<div v-for="(src, i) in details.contract_previews" :key="i">
<div class="flex items-center">
<a class="one-line flex-width" @click="preview(src)" style="text-decoration:none;">
<span>{{src.name}}</span>
</a>
<a-icon type="vertical-align-bottom" @click="downLoad(src)"/>
</div>
</div>
</div>
downLoad下载方法
downLoad(src){
this.getBlob(src.url, (blob) => {
this.saveAs(blob, src.name)
})
}
getBlob这个函数使用XMLHttpRequest
(XHR)来从给定的URL获取数据,并将响应类型设置为blob
,以便能够接收二进制数据。当请求成功完成时(即HTTP状态码为200),它调用回调函数cb
,并将获取到的Blob对象作为参数传递。
getBlob(url, cb) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (xhr.status === 200) {
cb(xhr.response)
}
}
xhr.send()
}
而saveAs函数负责将Blob对象保存为文件。它首先检查浏览器是否支持navigator.msSaveOrOpenBlob
(这是IE浏览器的特有方法),如果支持,则直接调用该方法。如果不支持,则创建一个临时的<a>
元素,设置其href
属性为Blob对象的URL(通过window.URL.createObjectURL
生成),并设置download
属性为文件名。然后,将该<a>
元素添加到文档中(虽然设置为不可见),模拟点击以触发下载,之后从文档中移除该元素,并释放Blob URL。
saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
}
else {
var link = document.createElement('a')
var body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
},
因为我读取数据库的数据对象中包含url和name两个键值对,所以我给文件的命名用的就是name键的值。如果要自定义命名,更改一下filename就行了