响应下载映像，而不是在新的选项卡中显示

Question

在我的react组件中，我有一个函数，它使用文件保护包保存一个文件数组。

文件保护程序包安装：

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)
}

，但我的期望是下载文件，而不是在新的浏览器选项卡中打开图像。我想触发从react组件下载。如何强制下载？用于下载的其他库是什么？

Answer 1

是的，我尝试了代码框，如果是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);
    })();  
}

Answer 2

基于上面@乔瓦尼·埃斯波西托的答案，

谢谢Giovanni的回答，但是，我向firebase存储提出的提取请求被CORS阻止了，所以这个方法一开始就失败了。

万一其他人遇到这样的问题，就会被CORS阻止。您将使用Firebase存储进行其他配置。

此帖子讨论了您需要使用Google进行的配置，以使请求正常工作。

就我的情况而言，我使用react.js从本地主机发出请求。下面是我必须添加到我的cors.json文件中的片段。

[
    {
      "origin": ["http://localhost:3000"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

我希望这对任何遇到我问题的人都有帮助。