下载
// 下载模版
const downloadTemp = (params) => {
return request({
url: '/device/mgt/batchCreate/download/template.xlsx', // 文件格式,支持 csv,xlsx
method: 'get',
// headers:{
// 'Content-Type':'application/x-www-form-urlencoded'
// },
responseType: 'blob', // 必须要加 不加的话会出问题 转化失败或者请求乱码 下面的代码都无效
})
}
/**
* 下载模板
*/
downloadTemp (e) {
e.stopPropagation()
downloadTemp().then(res => {
console.log('下载模板返回的res', res)
/**
* 不指定responseType的话,返回直接是文件流,type是undefined,下载的文件类型为txt
* 指定responseType,返回是Blob,此时如果new Blob不指定类型,下载文件类型为 txt
* .xlsx type为:application/vnd.ms-excel
* .xls application/vnd.ms-excel
* .cvs: application/csv
*/
console.log('下载模板返回的res.type', res.type) //
// 构造一个blob对象来处理数据,并设置文件类型
const blob = new Blob([res], { type: res.type })
// const blob = new Blob([res])
const eLink = document.createElement('a') // 生成一个a标签
eLink.download = '设备批量导入模板' //指定下载文件名
// a.setAttribute('download', '设备批量导入模板')
eLink.style.display = 'none'// 设置元素样式不可⻅
eLink.href = URL.createObjectURL(blob) // 创建下载的链接,指定下载链接
document.body.appendChild(eLink) //把a标签加到页面中
eLink.click() //触发a标签下载
const a = URL.revokeObjectURL(eLink.href) // 释放掉blob对象
document.body.removeChild(eLink) // 下载完成移除元素
})
}
},
使用原生的XHR发起请求:
downLoadFiles (token) {
let _this = this
let xhr = new XMLHttpRequest()
let downUrl = `${url.API_DEVELOP}/xx/deviceId/${this.head.id}`
xhr.open('GET', downUrl, true)
xhr.responseType = 'blob'
xhr.withCredentials = true
xhr.setRequestHeader('token', token)
// 成功:
xhr.onload = function () {
console.log('xhr.response:', xhr.response)
const blob = new Blob([xhr.response])
const blobUrl = window.URL.createObjectURL(blob)
let a = document.createElement('a')
a.download = `状态值模板.xlsx`
a.href = blobUrl
a.click()
}
// 发送
xhr.send()
},
axios 中配置withCredentials
https://blog.csdn.net/qq_34707272/article/details/119114615
https://blog.csdn.net/JIANYMN/article/details/123634100
- withCredentials 有什么用?
跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。
- 配置withCredentials:
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
withCredentials: true, // 跨域请求时发送Cookie
timeout: 60000, // 请求超时
headers: {
"Content-Type": "application/json; charset=UTF-8;"
}
});
或者:
axios.defaults.withCredentials = true
// 后端如果没开启的话,也需要开启下
需要注意是,当配置了xhr.withCredentials = true时,必须在后端增加 response 头信息Access-Control-Allow-Origin,且必须指定域名,而不能指定为*。
axios配置中transformRequest和transformResponse的作用
这两个比较底层,transformRequest
是发请求前的处理,自动识别携带请求头,比如application/json,transformResponse
是自动处理http返回数据,比如默认JSON parse。
interceptor
是处理config和返回的data,同时可以捕获处理异常。interceptor之间是异步串联执行,transform函数之间是同步串联执行,
interceptor可以实现transform这两个函数的功能,transform不能实现interceptor。为什么要有transform这两个函数,可能是设计模式,
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],