vue 下载文件

下载文件使用的是 a标签中的 download 属性

1. 项目中 是动态生成 a 标签, 再添加download 属性
2. 需求是点击下载按钮, 向后台发送请求, 后台返回一个url 之后调用这个返回的url地址, 进行数据下载

// 导入 axios 和 公用url地址
import axios from "axios";
import baseURL from "@/assets/js/config";
...
// 下载按钮
DownloadBtn() {
	// 后台需要的参数 
    let params = {
        tableName: this.download_TableName
    }
    // 发送第一次请求, 获取下载地址接口
    axios.post(`${baseURL}/export/exportData`, params).then(({data}) => {
    	console.log(data); 
    	// status: 200 
    	// url: "http://192.168.10.111:8080/gywl/allTxt/tab_rkdfk.txt"
    	// http://192.168.10.111:8080 部署的线上地址不同, 所以需要获取相应的地址
        if (data.status == 200) {
        	// 通过分割 获取公共地址和接口地址
            var getBaseUrl = data.url.split("gywl")[0].concat("gywl")
            var getHrefUrl = data.url.split("gywl")[1] // allTxt/tab_rkdfk.txt
            axios({
                method: 'get',
                // 不重新设置 会出现直接拼接当前的 localhost 地址
                baseURL: getBaseUrl,
                url: getHrefUrl,
                responseType: 'arraybuffer'    
            }).then(({data}) => {
                this.download(data)
            } )
        }
    })
},
// 动态创建 a 标签 添加 href 地址
download (data) {
    let link = document.createElement('a')
    // 将数据类型转换为 blob 格式
    let blob = new Blob([data],{type: ""});
    link.style.display = 'none'
    // 动态文件名称
    link.download = `${this.download_TableName}.txt`
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    // 创建之后赋给点击事件
    link.click()
},

a 标签中 download 属性

兼容性: 目前只能在Firefox 和 Chrome 浏览器中使用

<!-- href 指定下载的地址 download 指定下载的文件名称 -->
<a href="/images/myw3schoolimage.jpg" download="w3logo">

注意, 如果直接在Vue 中直接指定href 属性, 会自动拼接当前的地址

<a  href="/tabDdqxfk/queryPage" download="123">122</a>

responseType

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
简单来说就是 设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。
responseType支持以下几种值：

值	描述
""	将 responseType 设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。
arraybuffer	response 是一个包含二进制数据的 JavaScript ArrayBuffer
blob	response 是一个包含二进制数据的 Blob 对象
document	response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型
json	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
text	response 是包含在 DOMString 对象中的文本。