antdesign+React中upload组件onDownload方法配置，附下载
前几天在react+antd的后台项目中使用upload组件时，提出了下载需求，upload组件默认有两个icon，预览和删除，在没有设置预览的情况下，点击预览会直接在新窗口打开文件地址，官方文档中的onPreview：
| onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |
|---|
而官方文档中的onDownload：
| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |
|---|
一开始认为如果不写自定义onPreview，点了预览按钮调用了onDownload，打开了新页面，但是自定义onDownload方法的时候，点击预览按钮，却没有调用handleDownload。
<Upload
listType="picture-card"
fileList={fileList}
onDownload={handleDownload}
>
const handleDownload = (file: any) => {
console.log(file);
};
后来查阅资料发现想调用onDownload的回调函数需要为组件添加下载按钮，然后通过点击下载按钮调用。
showUploadList={
{
showDownloadIcon: true }} //展示下载按钮
配置完之后，就可以调用下载，以下是完整代码（包含下载函数）
<Upload
listType="picture-card"
fileList={fileList}
showUploadList={
{
showDownloadIcon: true }}
onDownload={handleDownload}
>
//blob处理
const getBlob = (url: string, cb: any) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
cb(xhr.response);
}
};
xhr.send();
};
//文件路径处理
const saveAs = (blob: any, filename: string) => {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body!.appendChild(link);
link.click();
body!.removeChild(link);
window.URL.revokeObjectURL(link.href);
};
//下载文件
const handleDownload = (file: any) => {
//这里的file做了处理是调用后端接口后返回了路径，前端拼接，所以有自定义的url和name。
//url即下载路径，name即文件保存的名称。
getBlob(file.url, function (blob: any) {
saveAs(blob, file.name);
});
};
好了，到此onDownload回到函数配置完成，如果帮到了你，麻烦点个赞吧~