需求1
用户在上传完文件后要求立即下载刚才所上传的文件,目前仅上传到了本地,没有上传到服务
/**
* 前端将文件上传到本地后,马上下载上传到本地的文件
* file 上传到本地的文件
*/
export function downloadImmediately(file){
// 模拟点击点击事件
const a = document.createElement('a')
// 在浏览器打开
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL对象
const href = URL.createObjectURL(file)
// 下载链接
a.href = href
// 设置下载文件的文件名
a.download = this.file.name
// 将下载的节点进行插入
document.body.appendChild(a)
// 点击下载
a.click()
// 下载完成后清楚数据
document.body.removeChild(a)
window.URL.revokeObjectURL(href)
}
需求2
用户下载已经在服务器上的一个文件或图片,后端通过文件流的方式返回,下载后端返回的流文件
1-1.在拦截相应时将需要的数据保存到本地
const service = axios.create({
Headers: {
"X-Requested-With": "XMLHttpRequest" // 标识时ajax请求
},
timeout: 60000
})
service.interceptors.response.use(res => {
const code = res.data.mesgCode
if(code === 200){
if(res.Headers["content-disposition"]){
const contentDisposition = decodeURI(res.Headers["content-disposition"])
if(contentDisposition.indexOf("fileName") !== -1){
sessionStorage.setItem("contentDisposition", contentDisposition)
sessionStorage.setItem("contentType", res.Headers["content-type"])
}
}
}
})
1-2. 获取需要下载的文件信息
/**
* 获取文件中的信息
*/
export function findFileName(){
// 以下sessionStorage所使用的数据都是拦截相应信息,存储的相应头中的数据
// 在返回先拦截返回信息,取出响应头中的信息存在sessionStorage,在此处从sessionStorage中获取
let file = sessionStorage.getItem('contentDisposition')
// contentDisposition含有多项信息,中间时用空格分隔
const fileArr = file.split(' ')
let fileName = ''
fileArr.forEach(item => {
let index = item.indexOf('filename')
if(index !== -1){
let fileNameStr = ''
for(let i = 0; i < item.length; i++){
fileNameStr += item[i].replace('"', '')
}
fileName = fileNameStr.split('=')[1]
return
}
})
const contentType = sessionStorage.getItem('contentType')
// 数据处理完成后清除存在sessionStorage下载所需要的数据
sessionStorage.removeItem('contentDisposition')
sessionStorage.removeItem('contentType')
// 返回文件名、文件格式
return {
name: fileName.split('.')[0],
type: contentType
}
}
2. 将文件信息与文件流汇总进行下载
/**
* 下载后端返回的流文件
* res 后端返回的文件流
* fileName 下载文件的文件名
* type 文件格式
*/
export function download(res, fileName, type){
// 创建一个blob对象
const blob = new Blob([res], {
type
})
// 以下内容与上传到本地的图片下载一致
const a = document.createElement('a')
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL对象
const href = URL.createObjectURL(blob)
a.href = href
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(href)
}
还有一种方式用的不多,但是很方便,后端直接返回一个下载链接,通过open方法就能完成下载
window.open(url)