Javascript 阻止在单击href时打开新页面

我的目标是将html表格下载到excel文件中，当单击按钮时，该文件会自动下载。该按钮调用函数

fnExportExcel（）

我使用以下代码将html表导出为excel文件：

function fnExportExcel() {
    var dt = new Date();
    var day = dt.getDate();
    var month = dt.getMonth() + 1;
    var year = dt.getFullYear();
    var hour = dt.getHours();
    var mins = dt.getMinutes();
    var postfix = month + "." + day + "." + year + "_" + hour + "." + mins;
    //creating a temporary HTML link element (they support setting file names)
    var a = document.createElement('a');
    //getting data from our div that contains the HTML table
    var data_type = 'data:application/vnd.ms-excel';
    var table_div = document.getElementById('datatable');
    var table_html = table_div.outerHTML.replace(/ /g, '%20');
    a.href = data_type + ', ' + table_html;
    //setting the file name
    a.download = 'MachineReport_' + postfix + '.xls';
    //triggering the function
    a.click();
    //just in case, prevent default behaviour
    e.preventDefault();
}

e.preventDefault（）

不起作用，但excel文件正在下载。正在加载新页面，但未找到。有没有其他方法可以防止这种情况发生？

您可以查看

let link=document.getElementById（“myLink”）//在这里写下元素的ID。
link.addEventListener（“mouseover”，link.showref=function（e）{
设target=e.target | | this；
如果（link.mouseDown）
link.mouseDown=false；
其他的
target.href=target._href | | target.href；
});
link.addEventListener（“mousemove”，link.showHref）；
link.addEventListener（“mouseup”，link.showrefforced=函数（e）{
link.mouseDown=false；
});
link.addEventListener（“touchend”，link.showrefforced）；
link.addEventListener（“mousedown”，link.cancelHref=function（e）{
设target=e.target | | this；
如果（target.href！=“javascript:void（0）”）
目标。_href=target.href；
target.href=“javascript:void（0）”；
link.mouseDown=true；
});
link.addEventListener（“touchstart”，link.cancelHref）；
link.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
link.showref（e）；
设target=e.target | | this；
让url=target._href | | target.href；
让newLink=document.createElement（“a”）；
newLink.download=link.name；
newLink.href=url；
newLink.click（）；
});

---

解决方案主要包括以编程方式禁用单击

元素，避免浏览页面，而创建一个隐藏的

元素（未添加到父元素），并执行其单击以静默方式下载URI。

调用

e.preventDefault（）

表明

e

已经是回调函数中的参数

您需要为

单击

创建一个事件侦听器，以便从

事件

回调中获取

e

参数

let anchorTag=document.querySelector（'a'））
addEventListener（'click'，e=>{//注意传递了'e'（这代表事件）
e、 preventDefault（）//在此处阻止事件
//逻辑就在这里
})

---

调用

.preventDefault（）

仅在事件处理程序中有意义。因此，不要执行“a.click（）”；e、 preventDefault（）；'我会这样做：“a.AddEventListener（“单击”，函数（e）{e.preventDefault（）；}）；”。因为当我这样做的时候，它不再下载文件了。你想做什么？“excel文件正在下载”-这是好事还是坏事？这是好事。我希望下载文件，而不是尝试加载新页面。因此，它现在正在执行这两项操作，我只希望它下载excel文件。这样做不允许我下载excel文件，这正是我所需要的。是否希望链接正常工作但不显示其他页面？是的。我希望它保持不变谢谢你这帮了我很多！如果我的表在iframe中，这有什么原因不起作用吗？我有另一个网页，我想做同样的事情，但唯一的区别是，它是在一个iframe，它是不一样的工作。

let link = document.getElementById("myLink"); //Here write the ID of your <a> element.
link.addEventListener("mouseover", link.showHref = function(e) {
  let target = e.target || this;
  if (link.mouseDown)
    link.mouseDown = false;
  else
    target.href = target._href || target.href;
});
link.addEventListener("mousemove", link.showHref);
link.addEventListener("mouseup", link.showHrefForced = function(e) {
    link.mouseDown = false;
});
link.addEventListener("touchend", link.showHrefForced);
link.addEventListener("mousedown", link.cancelHref = function(e) {
  let target = e.target || this;
  if (target.href !== "javascript:void(0)")
    target._href = target.href;
  target.href = "javascript:void(0)";
  link.mouseDown = true;
});
link.addEventListener("touchstart", link.cancelHref);
link.addEventListener("click", function(e) {
    e.preventDefault();
  link.showHref(e);
  let target = e.target || this;
    let url = target._href || target.href;
  let newLink = document.createElement("a");
  newLink.download = link.name;
  newLink.href = url;
  newLink.click();
});