Easy REACT 下载图片 - Javascript

在 React 中，如果要将图片从服务器下载到客户端显示，我们可以使用标签。但是在某些情况下，我们可能需要下载一张图片到本地。本文将介绍如何使用 React 和 Javascript 下载图片。

步骤

1. 在组件中创建一个下载按钮，当用户点击按钮时，下载图片。

import React from 'react';

class DownloadImage extends React.Component {
  downloadImage = () => {
    const url = '图片的URL地址';
    let downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = '图片的文件名';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }

  render() {
    return (
      <div>
        <button onClick={this.downloadImage}>下载图片</button>
      </div>
    )
  }
}

export default DownloadImage;

2. 为按钮添加样式以使它看起来像一个链接。

button {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}
button:hover {
  text-decoration: none;
}

使用方法

添加DownloadImage组件到你的应用程序。

<DownloadImage />

结论

现在你已经知道如何使用 React 和 Javascript 下载图片。这个方法使用了HTML5 新特性的下载属性，它可以为链接指定文件下载时的文件名。