Material-UI：芯片组件下载选项不起作用，如何解决下载问题？

Question

我已经使用 UI 上传了文件，我想在一段时间后或立即下载，我已经使用

<Chip>

组件实现了相同的功能，但它不起作用，需要帮助来解决该问题。

**上传的文件：**

const data = {
  lastModified: 1701069121191,
  lastModifiedDate: Mon Nov 27 2023 12:42:01 GMT+0530 (India Standard Time) {},
  name: "Template_v2(1).xlsx",
  size: 91827,
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  webkitRelativePath: ""
}

组件：

<Chip {...{
  label: d.name,
  onClick: () => <a href={URL.createObjectURL(d)} download style="display: none">shouldnt be visible</a>,
  onDelete: () => {
      onAttachChange({
          attachments: row.attachments.filter(f => f.name !== d.name),
          rowIndex: rowIndex
      })
  }
}} />

Answer 1

我发现问题是我们不被称为

<a>

点击方法下载文件并通过以下方式修复

解决方案：我们使用Javascript创建了

<a>

元素并调用了

click()

方法

<Grid
    container
    spacing={2}
    alignContent={'stretch'}
    className={classes.rowsGridPadding}
>
    {
        row.attachments.length > 0 ? (row.attachments.map((d, i) => {
            return <Grid item sx={{ alignItems: 'flex-start' }} key={`${d.name}${i}`}>
                <Chip {...{
                    label: d.name,
                    onClick: () => {
                        const link = document.createElement('a')
                        link.download = d.name
                        link.href = URL.createObjectURL(d)
                        link.click() // we have called click() method
                    },
                    onDelete: () => {
                        onAttachChange({
                            attachments: row.attachments.filter(f => f.name !== d.name),
                            rowIndex: rowIndex
                        })
                    }
                }} />
            </Grid>
        })) : <Grid item sx={{ alignItems: 'flex-start' }}>No Attachments Found</Grid>
    }
</Grid>