如何使用反应"Link"标签下载文件？

Question

我想使用URL下载图像。这就是我正在尝试的，但遇到错误失败-没有文件。

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

我试过这种方法，对我来说效果很好。

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;

Answer 2

您只需像下面这样直接打开链接，图像就会被下载。如果你的网址框架正确，那么你可以尝试下面的代码下载

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