在 Javascript 中动态触发从服务器到用户的新创建文件xlsx 或 docx的下载

如何解决在 Javascript 中动态触发从服务器到用户的新创建文件xlsx 或 docx的下载

在我正在开发的 Web 应用程序中，前端是 html/css/js，后端是 python，它们使用 restful API 链接。

在其中一个过程中，我需要以下内容：

1. 用户单击一个按钮，该按钮可能标记为“生成 xlsx 并下载”
2. 前端的 javascript 有一个按钮事件侦听器，它会告诉后端 python 生成一个 xlsx，然后（使用 node-fetch）将 xlsx 名称和位置返回给 javascript
3. 然后，我创建一个 <a> 标记作为下面的代码片段，以将 href 指向生成此新 xlsx 的位置

第 1 步和第 2 步工作得非常好。然后当它进入第 3 步时，下面的脚本就不起作用了。代码最终下载了一个 xlsx，其中包含整个 html 网页...（我为什么需要那个...），而不是我分配为 href 的 xlsx。

请问，有人能帮我找到解决方案吗？

downloadFile: (fileLink,fileName) => {
       var el = document.createElement("a");
       el.setAttribute('download',"");
       el.href = fileLink;
       console.log(fileLink);

       document.body.appendChild(el);

       // Above code is equivalent to
       // <a href="path of file" download="file name"> 

       // onClick property,to trigger download
       el.click();
       el.remove();
}

解决方法

好吧，我自己弄明白了......

事实证明，el.href = fileLink; 使应用程序认为 fileLink 位于网络上，因此它会自动向其添加相对路径。例如，http://localhost:5000/fileLink。然后就找不到了。

为了解决这个问题，我需要 Nginx 或 Flask 来从服务器提供存储库，然后我将代码更改为 el.href = 'http://${webserverIP}/${fileLink}'; 然后它就可以工作了。