下载文件而不刷新页面

Question

我有一个 javascript 页面，它有一个包含某些详细信息的表格。 单击一行，它将下载一个 JSON 文件。 我可以下载文件，但下载后页面会刷新。

function testDownload() {
  const data = { a: "ajith", b: "kumar" };
  const dataStr =
    "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
  const downloadAnchorNode = document.createElement("a");
  downloadAnchorNode.setAttribute("href", dataStr);
  debugger;
  downloadAnchorNode.setAttribute("id", "anchor");
  downloadAnchorNode.setAttribute("download", "extracted" + ".json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
}

下载完成后如何限制页面刷新？

Answer 1

如果您单击按钮下载 JSON，请尝试以下代码：

function testDownload(e) {
  e.preventDefault();
  const data = { a: "ajith", b: "kumar" };
  const dataStr =
    "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
  const downloadAnchorNode = document.createElement("a");
  downloadAnchorNode.setAttribute("href", dataStr);
  debugger;
  downloadAnchorNode.setAttribute("id", "anchor");
  downloadAnchorNode.setAttribute("onclick", "testDownloadFun(event)");
  downloadAnchorNode.setAttribute("download", "extracted" + ".json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
}

我添加了“preventDefault”方法。