JavaScript下载文件异常：使用filtered数组无法导出文本文件

核心问题 #

你遇到的下载失败，根源是两处关键错误：

1. webkitURL分支逻辑错误：该分支里你把DOM元素newLink直接替换成了URL字符串，导致后续调用newLink.click()时，字符串没有click()方法，触发报错中断了下载流程。
2. 另外代码里存在变量拼写失误（filterd应为filtered），虽不影响运行但易造成混淆。

修复后的完整代码 #

var x = document.querySelector("#regform > div:nth-child(8) > div > table > thead");
var nodes = x.getElementsByTagName("input");
var text = [];
for (i = 0; i < nodes.length; i++) {
  var y = nodes[i].getAttribute("name");
  text.push(y);
};

function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

var filtered = removeDuplicates(text); // 修正拼写错误
var result = Array.isArray(filtered);
console.log(result); // 确认是数组

// 将数组转为每行一个元素的文本，提升可读性
var textContent = filtered.join('\n');
var textToBLOB = new Blob([textContent], { type: 'text/plain' });

var sFileName = 'formData.txt';
console.log(textToBLOB);

var newLink = document.createElement("a");
newLink.download = sFileName;

if (window.webkitURL != null) {
  // 给DOM元素的href赋值，而非替换元素本身
  newLink.href = window.webkitURL.createObjectURL(textToBLOB);
} else {
  newLink.href = window.URL.createObjectURL(textToBLOB);
  newLink.style.display = "none";
  document.body.appendChild(newLink);
}

newLink.click();
// 下载完成后释放URL对象，避免内存泄漏
window.URL.revokeObjectURL(newLink.href);
// 若链接被添加到body，下载后移除
if (newLink.parentNode === document.body) {
  document.body.removeChild(newLink);
}

关键修复点说明 #

• 修正变量拼写：将filterd改为filtered，避免代码混淆。
• 修复webkit分支逻辑：保留newLink的DOM元素身份，仅给其href属性赋值URL，确保click()方法可正常调用。
• 优化文本格式：用join('\n')把数组元素转为每行一个的格式，比默认的逗号分隔更易读。
• 添加内存清理：下载完成后释放URL对象，并移除临时添加到body的链接，避免内存泄漏。

内容的提问来源于stack exchange，提问作者rakesh prajapat