反应下载图像而不是显示在新标签中

Question

在我的反应组件中，我有一个使用file-saver package 保存文件数组的函数。

文件保护程序包安装：

npm i file-saver

我的反应组件：

import { saveAs } from 'file-saver'

saveImg(urlArr){
    urlArr[0];
    let name = 'img' + 0 + '.jpg';
    saveAs(urlArr[0], name)
    urlArr[2];
    let name2 = 'img' + 2 + '.jpg';
    saveAs(urlArr[2], name2)
}

，它可以工作，但我的期望是下载文件而不是在新的浏览器选项卡中打开图像。我想触发从反应组件下载。如何强制下载？还有哪些其他库用于下载？

Answer 1

是的，我在代码沙箱上试过，如果是 URL，file-saver 将打开一个新选项卡而不是下载图像。但是，您可以尝试使用 blob 方式：

import { saveAs } from 'file-saver'

saveImg(urlArr){
    (async () => {
       let name = 'img' + 0 + '.jpg';
       let blob = await fetch(urlArr[0]).then((r) => r.blob());
       saveAs(blob, name);
    })();
    (async () => {
       let name2 = 'img' + 2 + '.jpg';
       let blob2 = await fetch(urlArr[2]).then((r) => r.blob());
       saveAs(blob2, name2);
    })();  
}