Experience

1. Antd 文件下载 ​

antd Upload组件上传文件之后，会在下方出现一行刚才上传的文件，那么又该如何点击文件进行下载呢？ ​

antd添加了 #itemRender 插槽来自定义文件项的渲染，使用 <a> 标签包裹文件名 file.name ，再调用封装好的下载方法就行啦~！

html
    <a-col :span="12">
      <a-form-item label="投标文件" name="file">
        <a-upload @remove="handleRemove" :customRequest="uploadFile" :beforeUpload="beforeUpload"
          v-model:fileList="fileList" :maxCount="1" :disabled="projectData?.projectStatusId === 21">
          <template #itemRender="{ file }">
            <div>
              <a @click.prevent="handleDownload(file.url || formState.tenderFileUrl)">
                <span v-text="file.name"></span>
              </a>
            </div>
          </template>
          <a-button :disabled="projectData?.projectStatusId === 21">上传文件</a-button>
        </a-upload>
      </a-form-item>
    </a-col>

为什么下载要 .prevent ？ ​

@click.prevent 可以阻止<a>标签的默认行为，即不跳转可以保持逻辑的完整性。 ​

定义一个下载方法👇~

javascript
const handleDownload = async (filePath) => {
  if (!filePath) {
    message.error('文件地址不存在');
    return;
  }
  console.log('准备下载文件:', filePath);

  // 调用下载接口
  const res = await downLoadFileAPI(filePath);
  console.log('下载响应:', res);

  // 从文件路径中获取文件名
  const fileName = filePath.split('/').pop();

  // 创建下载链接
  const downloadUrl = window.URL.createObjectURL(res.data);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = fileName;

  // 触发下载
  document.body.appendChild(link);
  link.click();

  // 清理
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);

  message.success('下载成功');
}