vue 下载文件

比如excel文件

原理：主要是利用a标签

<a download="fdsfds" href="https://........./a.xls">测试</a>

方法1：

onDown() {
        const dlink = document.createElement("a");
        dlink.style.display = "none";
        dlink.download = this.fileName;   //如果前后端跨域，名字会不生效。
        dlink.href = this.fileUrl;
        document.body.appendChild(dlink);
        dlink.click();
        URL.revokeObjectURL(dlink.href); // 释放URL 对象
        document.body.removeChild(dlink);

}

方法二：

window.open('https://s.........6.xls', '_blank')

方法三：

onDown（）{

        const url = this.fileUrl
        this.loading = true     //可以利用loading给提示或者禁止再次点击
        const elt = document.createElement('a')
        const fileName = this.fileName
        elt.setAttribute('href', url)
        elt.setAttribute('id', 'downloadLink')
        elt.setAttribute('download', `fdfsd.xls`)
        elt.style.display = 'none'
        document.body.appendChild(elt)
        elt.click()
        // 删除添加的a链接
        let downloadLink = document.getElementById('downloadLink')
        document.body.removeChild(downloadLink)
        this.loading = false

}

注意：如果是 通过后台获取的流文件blob，也需要注意，api请求中，设置下responseType: 'blob',需要通过let objectUrl = URL.createObjectURL(blob) // 创建URL

// 利用a标签自定义下载文件名
const link = document.createElement('a')

axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
    // 创建Blob对象，设置文件类型
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
    let objectUrl = URL.createObjectURL(blob) // 创建URL
    link.href = objectUrl
    link.download = 'xxx' // 自定义文件名
    link.click() // 下载文件
    URL.revokeObjectURL(objectUrl); // 释放内存
})