Configuração do método OnDownload do componente de upload em antdesign+React, download anexado
Ao usar o componente de upload no projeto em segundo plano do react+antd alguns dias atrás, um requisito de download foi proposto. O componente de upload tem dois ícones por padrão, visualizar e excluir. Se nenhuma visualização estiver definida, clicar na visualização abrirá diretamente o arquivo em uma nova janela Endereço, onVisualizar no documento oficial:
| onPreview | Retorno de chamada quando um link de arquivo ou ícone de visualização é clicado | função(arquivo) | - |
|---|
E emDownload na documentação oficial:
| emDownload | Callback ao clicar para baixar um arquivo, se não for especificado, irá pular para a guia correspondente ao URL do arquivo por padrão | function(arquivo): void | (Ir para a página da nova guia) |
|---|
A princípio, pensei que se não escrevesse um onPreview personalizado, clicasse no botão de visualização para chamar o onDownload e abrisse uma nova página, mas quando personalizei o método onDownload, cliquei no botão de visualização, mas não chamei o handleDownload.
<Upload
listType="picture-card"
fileList={fileList}
onDownload={handleDownload}
>
const handleDownload = (file: any) => {
console.log(file);
};
Posteriormente, verifiquei as informações e descobri que, se quiser chamar a função de retorno de chamada do onDownload, preciso adicionar um botão de download ao componente e, em seguida, chamá-lo clicando no botão de download.
showUploadList={
{
showDownloadIcon: true }} //展示下载按钮
Após a configuração, você pode chamar o download, a seguir está o código completo (incluindo a função de download)
<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);
});
};
Ok, agora onDownload retorna para a configuração da função e conclui. Se isso ajudar você, por favor, dê um joinha ~