下载的内容的类型可能很多,各种文件(例如:.txt,.jpg,.png,.docx,.xlsl)
一、如果已知是.docx,.xlsl这个格式可以下载最简单的就是a标签(限制太麻烦)
//如果是Excel,word,zip这种格式的文件a标签可以直接下载,或者href为相对地址时
<a download="filename" href="文件地址">点击下载</a>
//如果是jpg,png,txt这种的格式就变成了打开
<a download="filename" href="文件地址" target="_blank">点击下载</a>
//还有重定向的写法,pdf无法打开的又可以打开,
const w = window.open('about:blank');
w.location.href = pdfurl //pdfurl为完整的pdf的url
window.location.href = ExcelUrl //这种也能下载不能再网址上直接打开的文件
二 、要下载任意格式的文件,下载万能,可以封装一下做整个项目使用
downloadNow() {
let _this = this;
//请求参数
let params = {};
//请求路径
//axios,import axios from 'axios'
axios.post(url, params, { responseType: "blob" })
//.get(url, { responseType: 'blob' })//不需要参数的urlget请求
.then(response=> {
let blob = new Blob([response.data]);
let fileName = "文件名.pdf";
if ("download" in document.createElement("a")) {
// 非IE下载
let elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
this.$message.success("生成文件成功");
})
.catch(err => {
console.log(err);
this.$message.error("服务器出现问题,请稍后再试");
});
}
三、封装一个公用方法使用
用了fecth请求和ant design,如果用axios和element只需fecth那一行,提示换成eml的这种this.$message('这是一条消息提示');
//这个用fetch和ant的UI组件
import fetch from 'dva/fetch';
import { stringify } from 'qs';
import { message } from 'antd';//ant提示的ui组件
// 导出项目列表
export default function download({ url = '', params = {}, fileName = 'file', method = 'POST', callbackFn }) {
// header里加入x-auth-token信息,用于通过后台校验
const token = sessionStorage.getItem(key);
let newUrl = `${ url}`;
const option = {
method,
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
'x-auth-token': token,
})
}
if (method === 'GET' || method === 'get') {
newUrl = `${newUrl}?${stringify(params)}`;
} else {
Object.assign(option, { body: JSON.stringify(params) });
}
// 可以根据需求传特定的一些参数
fetch(newUrl, option).then((response) => { //用axios的把fetch修改为axios.post,上面记得
//引入axios
const resCopy = response.clone();
resCopy.json().then(json => {
if (typeof (json) === 'object' && json.code !== 200) {
message.error(json.msg);//报错提示用对应的ui组件写法
if (callbackFn && typeof (callbackFn) === 'function') {
callbackFn(response)
}
}
}).catch((error) => {
response.blob().then(blob => {
const blobUrl = window.URL.createObjectURL(blob);
if ('download' in document.createElement('a')) {
//非IE下载
const a = document.createElement('a');
// let a = document.getElementById('a_id');
// 无法从返回的文件流中获取文件名
// let filename = response.headers.get('Content-Disposition');
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
document.removeChild(a);
}else{
// IE下载
navigator.msSaveBlob(blob, fileName);
}
});
})
if (callbackFn && typeof (callbackFn) === 'function') {
callbackFn(response)
}
}).catch((error) => {
console.log(error);
if (callbackFn && typeof (callbackFn) === 'function') {
callbackFn(error)
}
});
};
//使用
import download from '@/utils/download';//导入封装的js
export(params) {
let url = '/export';//接口
this.setState({ exportLoading: true })//导出加载状态,不同语言框架和ui框架不一样,但都是通
//过true和false控制显示和隐藏
download({
url,
params,
method: 'POST',
fileName: `列表${moment(new Date()).format("YYYY-MM-DD")}.xlsx`,
callbackFn: () => {
this.setState({ exportLoading: false })
}
})
};