单击HTML按钮或JavaScript时如何触发文件下载

2020/09/27 00:01 · javascript ·  · 0评论

这太疯狂了,但我不知道该怎么做,而且由于这些单词很普遍,因此很难在搜索引擎上找到我需要的东西。我认为这应该很容易回答。

我想要一个简单的文件下载,该操作与此相同:

<a href="file.doc">Download!</a>

但是我想使用HTML按钮,例如以下任一按钮:

<input type="button" value="Download!">
<button>Download!</button>

同样,是否可以通过JavaScript触发简单下载?

$("#fileRequest").click(function(){ /* code to download? */ });

我绝对不是在寻找一种创建类似于按钮的锚,使用任何后端脚本或与服务器标头或mime类型混淆的方法。

对于按钮,您可以执行

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

您可以使用HTML5 download属性触发下载

<a href="path_to_file" download="proposed_file_name">Download</a>

哪里:

  • path_to_file是路径解析为URL 同根同源这意味着页面和文件必须共享相同的域,子域,协议(HTTP与HTTPS)和端口(如果指定)。例外是blob:and data:(始终有效)和and file:(永远无效)。
  • proposed_file_name是要保存到的文件名。如果为空,则浏览器默认为文件名。

文档:MDNHTML标准上下载HTML标准上downloadCanIUse

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

使用jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

旧线程,但缺少一个简单的js解决方案:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

您可以通过不可见的iframe使用“技巧”来做到这一点。将“ src”设置为它时,浏览器会做出反应,就像您单击带有相同“ href”的链接一样。与表单解决方案相反,它使您可以嵌入其他逻辑,例如,在超时后,满足某些条件时激活下载等。

它也非常安静,不会像使用时那样闪烁新窗口/选项卡window.open

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

引导版本

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

记录在Bootstrap 4文档中,也可以在Bootstrap 3中使用。

我认为这是您正在寻找的解决方案

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

我曾经遇到过我的Javascript生成CSV文件的情况。由于没有远程URL可供下载,因此我使用以下实现。

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

关于什么:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

您可以隐藏下载链接,然后单击按钮。

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

如果您正在寻找普通的JavaScript(无jQuery)解决方案并且不使用HTML5属性,则可以尝试一下。

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}
.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}
<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

这最终对我有用,因为要下载的文件是在加载页面时确定的。

JS更新表单的action属性:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

调用JS更新表单的action属性:

<body onLoad="setFormAction();">

带有提交按钮的表单标签:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

以下无效

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

如果您不能使用表单,则使用downloadjs的另一种方法非常合适。downloadjs在后台使用blob和html 5文件API:

<div onClick=(()=>{downloadjs(url, filename)})/>

*这是jsx / react语法,但可以在纯HTML中使用

注意:已编辑以解决上述布局问题

您的<body></body>标记之间的任意位置,请使用以下代码放入一个按钮:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

这肯定可以工作!

如果您有一个复杂的URL,另一种方法file.doc?foo=bar&jon=doe是在表单中添加隐藏字段

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

灵感来自@Cfreak答案,该答案不完整

您可以添加标签,不带任何文本,但带有链接。当您像在代码中一样单击按钮时,只需运行$(“ yourlinkclass”)。click()函数。

下载属性

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

加载文件和下载文件之间有区别以下html代码加载文件:

<a href="http://www.fbi.gov/top-secret.pdf">loading on the same tab</a>

单击此链接后,当前选项卡将替换为pdf文件,然后可以下载该文件。在该链接上单击鼠标右键,可以选择菜单项“ 保存”链接,以直接下载文件。如果希望在单击这样的链接时获得“ 另存为”对话框,则可能需要采用以下代码:

<a href="http://www.fbi.gov/top-secret.pdf?download=1">save as...</a>

如果您选择在选项中使用下载目录,则浏览器将立即下载此文件。否则,您的浏览器将提供另存为对话框。

您还可以选择下载按钮:

<button type="submit" onclick="window.open('http://www.fbi.gov/top-secret.pdf?download=1')">
    save as...
</button>

如果您希望将链接加载到新标签上,则需要

<a href="http://www.fbi.gov/top-secret.pdf" target="_blank">loading on a new tab</a>

表单元素不遵守指令?download = 1它只听从指令target =“ _ blank”

<form method="get" action="http://www.fbi.gov/top-secret.pdf" target="_blank">
    <button type="submit">loading on a new tab</button>
</form>

如果您使用<a>标记,请不要忘记使用指向文件的整个网址,即:

<a href="http://www.example.com/folder1/file.doc">Download</a>

对我来说,添加按钮而不是锚文本非常有效。

<a href="file.doc"><button>Download!</button></a>

按照大多数规则,这可能不可行,但看起来还不错。

本文地址:http://javascript.askforanswer.com/danjihtmlanniuhuojavascriptshiruhechufawenjianxiazai.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!