下载文件使用的是
a
标签中的download
属性
- 项目中 是动态生成
a
标签, 再添加download
属性 - 需求是点击下载按钮, 向后台发送请求, 后台返回一个
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 对象中的文本。 |