javascript - Firefox 没有将正确的文件下载到机器上

Question

我有一个我构建的 react 应用程序，它使用 redux、react router v4 和 d3 来可视化数据。我的应用程序包含一个力导向图、一个表格和一个直方图。这些视图中的每一个都包含可单击的节点、表格单元格和条形图，当单击它们时，文件应下载到用户的机器上。我最近将 firefox 更新到最新版本 62.0.2 并且下载不再按预期运行，但它在 Chrome 中仍然可以正常工作。这些文件与应用程序位于同一个域中，我已将下载代码编写为：

    let newlink = document.createElement('a');
    newlink.setAttribute('download', 
 'https://www.example.com/docs/xml/file1.xml');
    newlink.setAttribute('href', 'https://www.example.com/docs/xml/file1.xml');
    newlink.setAttribute('target', '_blank');
    document.body.appendChild(newlink);
    newlink.click();

Firefox 正在做的是在我的应用程序根目录下载 index.html 文件，而不是在 url 变量中下载文件（例如https://www.example.com/docs/xml/file1.xml）。对话框显示它实际上是在尝试使用正确的名称保存文件（Firefox 已自动将“/”替换为下划线以保存文件。域是正确的，但该位置不包含文件的完整 URL。完整的 URL 是否以某种方式被截断？

对话框上的类型是 HTML（这是不正确的，我的所有文件都是 xml 或 txt），如果用户选择保存或打开，它会保存 index.html 或打开一个空白/黑色网页。我要疯了，想弄清楚这里发生了什么。请帮忙！

标签： javascriptreactjsd3.jsreact-router

Answer 1

最终在 Firefox 中解决此问题的是通过导航到 about:serviceworkers（在 Firefox 中）从应用程序的域中取消注册服务工作者。然后我在我的 UI 代码中注释掉了注册服务工作者函数，因为无论如何我都没有在这个应用程序中使用它们。无论出于何种原因，服务人员拦截了文件下载并导致浏览器下载 index.html 文件而不是它应该下载的文本文件。一旦我做了这两件事，文件就被正确下载了。如果有人知道为什么会这样，我很乐意发表评论。