如何使用反应“链接”标签下载文件？

Question

我想使用 URL 下载图像。 这就是我正在尝试的，但面临错误Failed - No file 。

import React, { useState, useEffect } from 'react';
import Download from '../assets/download.png'

//More imports

export function Home(props) {
    const [image, setIamge] = useState([]);
    const [imageUrl, setImageUrl] = useState('');

    //more states
   //More functions

    const handleDownload = (item) => {
        //item.url = "https://unsplash.com/photos/yC-Yzbqy7PY"
        setImageUrl(item.url)
    }
    return (
        <div className="home-container">
            {
                image.length ? image.map((item, key) => (
                    <div key={key} className="image-wrapper">
                        <Link className='download-link' to={imageUrl} target="_blank" download>
                            <img src={Download} onClick={() => { handleDownload(item) }} alt="fff" height="15px" width="15px" />
                        </Link>
                    </div>
                )) : null}
        </div>
    );
}
export default Home;

我想通过单击下载图标下载图像。

Answer 1

您可以使用如下所示直接打开链接，图像将被下载。 如果您正确地构建了 URL，那么您可以尝试下载以下代码

const handleDownload = (item) => {
        //item.url = ""https://unsplash.com/photos/yC-Yzbqy7PY""
          window.open(item.url, "_blank");
        setImageUrl(item.url)
    }

Answer 2

我试过这种方式，这对我来说很好。

import React, { useState, useEffect } from 'react';
import Download from '../assets/download.png'

//More imports

export function Home(props) {
    const [image, setIamge] = useState([]);
    const [imageUrl, setImageUrl] = useState('');

    //more states
   //More functions

    const handleDownload = (item) => {
        let a = document.createElement('a');
        a.href = item.url + "/download?force=true";
        a.download = 'image.png';
        a.click();
    }
    return (
        <div className="home-container">
            {
                image.length ? image.map((item, key) => (
                    <div key={key} className="image-wrapper">
                        <Link className='download-link' download>
                            <img src={Download} onClick={() => { handleDownload(item) }} alt="fff" height="15px" width="15px" />
                        </Link>
                    </div>
                )) : null}
        </div>
    );
}
export default Home;