从 onclick 方法调用 href 不起作用答案

【问题标题】：Calling href from onclick method does not work从 onclick 方法调用 href 不起作用
【发布时间】：2019-07-08 08:42:45
【问题描述】：

您好，我想知道如何从 button onclick 事件中调用 a 点击：

到目前为止，我已经通过这两种方法使它起作用了：

<a class="button" type="application/octet-stream"  href="http://localhost:5300/File" download>Click here for dld</a>

<input type="button"  onclick="location.href='http://localhost:5300/File';" value="Download"/>

但我不能让它与 js 一起工作；我试过这样：

 <button  onclick="Save('http://localhost:5300/File')">Download</button>

 function Save(url){
            var link=document.createElement('a');
            link.url=url;
            link.name="Download";
            link.type="application/octet-stream";
            document.body.append(link);
            link.click();
            document.body.removeChild(link);
            delete link;
        }

P.S我需要使用<button></button>而不是input！

【问题讨论】：

应该是link.href

标签： javascript download href

【解决方案1】：

添加button type='button'

function Save(url) {
  console.log(url)
  var link = document.createElement('a');
  link.url = url;
  link.name = "Download";
  link.type = "application/octet-stream";
  document.body.append(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

<a class="button" type="application/octet-stream" href="http://localhost:5300/File" download>Click here for dld</a>



<button type='button' onclick="Save('http://localhost:5300/File')">Download</button>

【讨论】：

【解决方案2】：

你真的需要创建一个a 元素吗？如果没有，我会使用window.location.href，类似于点击链接。

例子：

function Save(url){
    window.location.href = url;
}

唯一的问题可能是您从 HTTPS（安全）站点链接到 HTTP（非安全）站点。

【讨论】：

我不需要显式创建a元素。我只需要保留当前页面并开始下载文件。这是我在互联网上查看的示例。

【解决方案3】：

您的代码创建一个链接，单击它然后将其删除。您可以像在 HTML 示例中那样运行 window.location.href。

onclick = "Save('http://localhost:5300/File')" > Download < /button>

function Save(url) {
  window.location.href = url;
}

&lt;button onclick="Save('http://localhost:5300/File')"&gt;Download&lt;/button&gt;

或者，如果您坚持创建链接的方法，您应该为链接设置href，而不是url。

function Save(url) {
  var link = document.createElement('a');
  link.href = url;
  link.name = "Download";
  link.type = "application/octet-stream";
  document.body.append(link);
  link.click();
  document.body.removeChild(link);
}

&lt;button onclick="Save('http://localhost:5300/File')"&gt;Download&lt;/button&gt;

【讨论】：

【解决方案4】：

const btn = document.querySelector('button');
btn.addEventListener('click', function(e) {
    e.preventDefault();
    save('http://localhost:5300/File');
});

function save(url) {
    let link = document.createElement('a');
    link.href = url;
    link.name = "Download";
    link.type = "application/octet-stream";
    document.body.append(link);
    link.click();
    document.body.removeChild(link);
    delete link;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>

【讨论】：