无法在React JS中下载文件

Question

我想使用预签名的URL从s3 bucket下载一个文件，但不幸的是，所有像jpeg/jpg/png这样的图像格式都没有下载，而是打开到一个新的选项卡，下面我附上了我尝试过的解决方案，但它们都不起作用。

尝试使用名为文件保护程序的npm包。这会下载除图像文件之外的所有内容

import { saveAs } from 'file-saver';
const download = (url, filename) => {
saveAs(url, filename)
}

尝试使用名为js文件下载的npm包。这在其他格式上也不起作用。

import downloadFile from 'js-file-download';
const download = (url, filename) => {
downloadFile(url, filename)
}

尝试使用纯JS，但只有图像文件没有下载：

const download = (url, filename) => {
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
filename,
);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
}

Answer 1

您可以使用锚点元素：

import React from "react";
export default function App() {
return (
<div>
<a href="URL_PATH" download>
Click to download
</a>
</div>
);
}

或者像你一样给我们file-saver包：

import React from "react";
import { saveAs } from "file-saver";
export default function App() {
const saveFile = () => {
saveAs(
"URL_PATH",
"DOWNLOADED_FILE_NAME"
);
};
return (
<div>
<button onClick={saveFile}>download</button>
</div>
);
}