vue下载文件自定义名称

下载文件中碰到一个问题，服务器中存储的文件的链接中，文件名是加密转换过的字母和数字的结合，如果直接下载下载就是这串字母+数字，所以只能自定义命名了

页面按钮（这里我用了一个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就行了