reactjs - 如何使图像/文件可下载

Question

我希望能够下载图像/文件。我认为这就像悬停在图像上时的删除按钮一样。理想的情况是从服务器渲染图像时的下载图标。我的想法是这样的

<a href={srcValue} download>

并包装 img 标签。并分别用于文件。那么有没有更体面的方法来做到这一点而不是覆盖所有文件（FileInput、FileInputPreview、ImageInput、ImageField 等）

谢谢！

Answer 1

你可以试试这个。

export const Something = (props) => {
  return (
    <List {...props} >
      <Datagrid>
        <ReferenceField label="Get Image" source="id" reference="pathToImage" linkType={false} >
          <ImageLink />
        </ReferenceField>
      </Datagrid>
    </List>
  )
}

const ImageLink = ({record}) => {
  return (
    <a href={config.staticHost + '/' + record.nameOnDisk} target="_blank" download >
      <FlatButton label="Download" />
    </a>
  )
}

如果您的记录包含图像的 URL，您可以跳过 ReferenceField。您可以将记录中的 url 传递给它，而不是整个记录。