【问题标题】:Download File Using JavaScript/jQuery使用 JavaScript/jQuery 下载文件
【发布时间】:2021-12-18 19:31:24
【问题描述】:

我有一个非常相似的需求,指定here

$('a#someID').click();时我需要让用户的浏览器手动开始下载

但我不能使用window.href 方法,因为它会将当前页面内容替换为您尝试下载的文件。

相反,我想在新窗口/标签中打开下载。这怎么可能?

【问题讨论】:

  • 我在相关问题中尝试了很多答案,this is the definitive answer.
  • 设置 window.location.href 对我有用。窗口内容也不会改变。我假设您使用了错误的 contentType?

标签: javascript jquery download


【解决方案1】:

使用不可见的<iframe>

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

要强制浏览器下载它本来可以呈现的文件(例如 HTML 或文本文件),您需要服务器将文件的 MIME Type 设置为无意义的值,例如 application/x-please-download-me 或替代application/octet-stream,用于任意二进制数据。

如果您只想在新选项卡中打开它,唯一的方法是让用户单击其target 属性设置为_blank 的链接。

在 jQuery 中:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

只要点击该链接,它就会在新的标签/窗口中下载文件。

【讨论】:

  • 网页无法自动打开新标签页。要强制浏览器下载,让服务器发送带有废话 MIME 类型的 pdf 文件,例如 application/x-please-download-me
  • 干得好!很好地解决了问题。但是,您可能想要使用:iframe.style.display = 'none';,因为这将完全隐藏 iframe。您当前的实现将使 iframe 不可见,但 iframe 仍会占用页面底部的空间,从而导致额外的空白。
  • 它“半”对我有用。我创建了以下简单的测试 html: 它确实被下载了,但是在 chrome 控制台中我看到下载被“取消”并显示为红色。这是一个更大的移动网络应用程序的一部分,它被取消的事实会破坏应用程序,因为它会引发一般的网络故障。有什么办法吗?
  • 不错的sn-p。但是,设置一个无意义的事物类型有点令人不安。要让浏览器下载它可以呈现的文件,请使用以下标头:Content-Disposition: attachment; filename="downloaded.pdf"(您当然可以根据需要自定义文件名)。
  • 如何在没有服务器的情况下强制下载?所以只是一个带有一些 javascript 的 html 页面。
【解决方案2】:

2019 年现代浏览器更新

这是我现在推荐的方法,但有几点需要注意:

  • 需要相对现代的浏览器
  • 如果文件预计非常大,您可能应该执行类似于原始方法(iframe 和 cookie)的操作,因为以下某些操作可能会消耗至少与正在下载的文件和/或其他有趣的 CPU 副作用。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 年原创的基于 jQuery/iframe/cookie 的方法

我创建了jQuery File Download plugin (Demo) (GitHub),它也可以帮助您解决问题。它与 iframe 的工作方式非常相似,但有一些很酷的功能,我发现它们非常方便:

  • 很容易设置和漂亮的视觉效果(jQuery UI 对话框,但不是必需的),一切都经过测试

  • 用户永远不会离开他们开始下载文件的同一页面。此功能对于现代 Web 应用程序变得至关重要

  • successCallback 和 failCallback 函数允许您明确说明用户在任一情况下看到的内容

  • 结合 jQuery UI,开发人员可以轻松地显示一个模式,告诉用户正在下载文件,在下载开始后解散模式,甚至以友好的方式通知用户发生了错误。有关此示例,请参阅Demo。希望这对某人有帮助!

这是一个简单的用例演示,使用带有 Promise 的插件 sourcedemo page 还包括许多其他“更好的用户体验”示例。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

【讨论】:

  • 你的现代例子在我看来没有多大意义。你为什么要通过fetch从真实的HTTPS URL下载东西,从中创建一个blob,从blob创建一个blob URL,然后使用具有download属性的锚点从blob URL下载,当你可以而只是...使用具有download 属性的锚点从您开始使用的 HTTPS URL 下载?
  • @MarkAmery 正如其他答案所表明的那样也有效。这种方法 (AFAIK) 不会向您提供有关下载何时开始、何时完成以及是否出错的反馈,这很方便。我可以将其添加到“即发即弃”选项的答案中。此外,[download] 属性也不允许 POST 或任何异国情调。
  • 您的现代示例不太正确。无论服务器返回什么,它都会“下载”。例如,如果您遇到身份验证错误,它将返回登录页面或服务器返回的任何内容,而不是“下载的文件”本身。
  • 关于您的现代示例,如果您想避免添加这个(说实话)不太好的代码,有几个轻量级包可以为您做到这一点。我最喜欢的是'fs-browsers' - npmjs.com/package/fs-browsers
【解决方案3】:
function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

检查您的目标浏览器是否会顺利运行上述 sn-p:
http://caniuse.com/#feat=download

【讨论】:

  • 下载文件名没有改变... 2015 年 4 月在 chrome 中测试
  • 对我来说这将是完美的,但它也不适用于 Firefox。有什么想法吗?
  • 正如caniuse.com/#feat=download 中提到的,这仅适用于最近的 Firefox 和 Chrome 版本的同源链接。因此,如果您的链接指向另一个域,那么它现在几乎无法在任何地方使用。
  • 要让它在 Firefox 上运行,请在点击之前执行document.body.appendChild(link),在点击之后您可以执行link.remove(),以避免污染 DOM。
  • 您也可以使用link.download = "" 使其保留其原始文件名并避免设置一个。
【解决方案4】:

我很惊讶没有多少人知道元素的下载属性。请帮忙宣传一下!你可以有一个隐藏的 html 链接,然后假装点击它。如果 html 链接具有下载属性,它会下载文件,而不是查看它,无论如何。这是代码。如果它可以找到它会下载一张猫的图片。

document.getElementById('download').click();
&lt;a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden&gt;&lt;/a&gt;

注意: 并非所有浏览器都支持此功能:http://www.w3schools.com/tags/att_a_download.asp

【讨论】:

  • IE 和 Safari 不支持
  • Chrome 下载,但 Firefox 只显示图片。
  • +1 用于提供可执行的 sn-p。节省了我测试它的时间,只是发现它不起作用。
  • 最新的 Chrome(2018 年 8 月)也显示图片(由于荒谬的安全限制)所以失败
  • Chrome 无法下载 mp4s
【解决方案5】:

我建议使用the download attribute 代替jQuery 进行下载:

<a href="your_link" download> file_name </a>

这将下载您的文件,而无需打开它。

【讨论】:

  • 它将只支持 Chrome、Firefox、Opera 和 IE (>= 13.0 )
  • Edge >= 13,不是 IE。 Edge 13 的实现也有问题,因为文件的名称被忽略了,而是你得到一个以 id 作为名称的文件。
  • 在我看来,这是问题的正确答案。如果您必须支持旧版浏览器并需要解决方法,则其他答案是有意义的。
  • 但是如果我们需要通过链接传递有效载荷呢?
【解决方案6】:

如果你已经在使用 jQuery,你可以利用它来生成一个更小的 sn-p
安德鲁答案的 jQuery 版本:

var $idown;  // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
  if ($idown) {
    $idown.attr('src',url);
  } else {
    $idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
  }
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');

【讨论】:

  • 仅供参考,有人建议(通过编辑我的帖子)添加 $idown.attr('src', url);在第一次创建 iframe 之后。我认为不需要。它已经在创建步骤中设置了“src:url”。
  • 还要评论一下,最后我没有使用这个解决方案,因为 IE 9 不喜欢动态创建的 iframe 指向 http:// 当您在 https 网络中时。我不得不使用“window.location.href”,这个解决方案也有一些不便
  • "if($idown)" 部分在最新的 Chrome(24) 中对我不起作用,但只是创建了无数个 iframe。可能是因为我想同时下载 12 个东西?
  • if 声明应该是:if( $idown &amp;&amp; $idown.length &gt; 0 )
  • 在 Chrome 中不做任何事情
【解决方案7】:

如果您不需要浏览其他页面,这可能会有所帮助。 这是基本的 javascript 函数,因此可以在任何后端使用 Javascript 的平台中使用

window.location.assign('any url or file path')

【讨论】:

  • 如果您可以自己设置 contentType,这可能是最简单的解决方案。我将其用作:window.location.href = downloadFileUrl;
  • 如果管理员不想向用户显示 URL 比?
【解决方案8】:

适用于 Chrome、Firefox 和 IE8 及更高版本。

var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();

【讨论】:

  • 如果您不将链接附加到 DOM,这也可以。
  • 除非从服务器返回的标头指示不这样做,否则这将简单地导航到url,而不是从中下载。
【解决方案9】:

使用iframe的简单示例

function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
        iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

然后在任何你想要的地方调用函数:

downloadURL('path/to/my/file');

【讨论】:

  • 下载码在哪里?您只是添加了一个 iframe
【解决方案10】:

仅仅七年后,这里出现了一个使用表单而不是 iframe 或链接的单行 jQuery 解决方案:

$('<form></form>')
     .attr('action', filePath)
     .appendTo('body').submit().remove();

我已经测试过了

  • 铬 55
  • 火狐50
  • Edge IE8-10
  • iOS 10(Safari/Chrome)
  • Android Chrome

如果有人知道此解决方案的任何缺点,我会很高兴听到这些。


完整演示:

<html>
<head><script src="https://code.jquery.com/jquery-1.11.3.js"></script></head>
<body>
<script>
    var filePath = window.prompt("Enter a file URL","http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip");
    $('<form></form>').attr('action', filePath).appendTo('body').submit().remove();
</script>
</body>
</html>

【讨论】:

  • 如果您的filePath 有查询字符串,这不起作用,因为提交表单将覆盖操作属性中的查询字符串。
  • 我通过在表单中​​添加一个输入来解决这个问题:var authInput = $("&lt;input&gt;").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');$('&lt;form&gt;&lt;/form&gt;') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove(); 这相当于访问:filepath?myQsKey=myValue
  • 这也会关闭 websockets。
  • 这看起来像是一种将window.location 设置为filePath 的非常复杂的方法。只需window.location = filePath; 也会这样做。
  • 无论该解决方案是否存在缺点,就其本身而言,您没有提供任何优点来通过链接使用它。 (还有一个缺点:您不能以这种方式使用download 属性告诉浏览器您想要下载,而不管服务器返回什么标头,您可以使用a 元素来做到这一点。)跨度>
【解决方案11】:

我最终使用了下面的 sn-p,它适用于大多数浏览器,但未在 IE 中测试。

let data = JSON.stringify([{email: "test@domain.com", name: "test"}, {email: "anothertest@example.com", name: "anothertest"}]);

let type = "application/json", name = "testfile.json";
downloader(data, type, name)

function downloader(data, type, name) {
	let blob = new Blob([data], {type});
	let url = window.URL.createObjectURL(blob);
	downloadURI(url, name);
	window.URL.revokeObjectURL(url);
}

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

更新

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

function downloader(data, type, name) {
    let blob = new Blob([data], {type});
    let url = window.URL.createObjectURL(blob);
    downloadURI(url, name);
    window.URL.revokeObjectURL(url);
}

【讨论】:

  • 在这里使用MouseEvent 而不是一直使用click 有什么意义?为什么在单击之前将链接附加到文档中?也许这比stackoverflow.com/a/23013574/1709587 中显示的更简单的方法有优势,但如果是这样,这里就不解释了。
  • 我发布这个答案已经有一段时间了。我不记得那些不必要的代码行背后是否有任何原因。
【解决方案12】:

我不知道这个问题是不是太老了,但是只要下载 mime 类型正确(例如 zip 存档),将 window.location 设置为下载 url 就可以了。

var download = function(downloadURL) {

   location = downloadURL;

});

download('http://example.com/archive.zip'); //correct usage
download('http://example.com/page.html'); //DON'T

【讨论】:

    【解决方案13】:

    为了改进 Imagine Breaker 的答案,FF 和 IE 支持此功能:

    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    
    function downloadURI(uri, name) {
        var link = document.createElement("a");
        link.download = name;
        link.href = uri;
        link.dispatchEvent(evt);
    }
    

    换句话说,只需使用dispatchEvent 函数而不是click()

    【讨论】:

    • 这是如何改进的?它似乎只是做同样事情的一种更复杂的方式。
    • 我们如何将此作为发布请求?
    【解决方案14】:

    为 FireFox、Chrome 和 IE 代码下载数据的最完整和工作(测试)代码如下。假设 Data 在 texarea 字段中,其 id='textarea_area' 并且 filename 是要下载数据的文件的名称。 p>

    function download(filename) {
        if (typeof filename==='undefined') filename = ""; // default
        value = document.getElementById('textarea_area').value;
    
        filetype="text/*";
        extension=filename.substring(filename.lastIndexOf("."));
        for (var i = 0; i < extToMIME.length; i++) {
            if (extToMIME[i][0].localeCompare(extension)==0) {
                filetype=extToMIME[i][1];
                break;
            }
        }
    
    
        var pom = document.createElement('a');
        pom.setAttribute('href', 'data: '+filetype+';charset=utf-8,' + '\ufeff' + encodeURIComponent(value)); // Added BOM too
        pom.setAttribute('download', filename);
    
    
        if (document.createEvent) {
            if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { // IE
                blobObject = new Blob(['\ufeff'+value]);
                window.navigator.msSaveBlob(blobObject, filename);
            } else { // FF, Chrome
                var event = document.createEvent('MouseEvents');
                event.initEvent('click', true, true);
                pom.dispatchEvent(event);
            }
        } else if( document.createEventObject ) { // Have No Idea
            var evObj = document.createEventObject();
            pom.fireEvent( 'onclick' , evObj );
        } else { // For Any Case
            pom.click();
        }
    
    }
    

    然后调用

    <a href="javascript:download();">Download</a>
    

    用于下载启动。

    为下载对话框设置正确的 MIME 类型的数组可以如下:

    // ----------------------- Extensions to MIME --------- //
    
            // List of mime types
            // combination of values from Windows 7 Registry and 
            // from C:\Windows\System32\inetsrv\config\applicationHost.config
            // some added, including .7z and .dat
        var extToMIME = [
            [".323", "text/h323"],
            [".3g2", "video/3gpp2"],
            [".3gp", "video/3gpp"],
            [".3gp2", "video/3gpp2"],
            [".3gpp", "video/3gpp"],
            [".7z", "application/x-7z-compressed"],
            [".aa", "audio/audible"],
            [".AAC", "audio/aac"],
            [".aaf", "application/octet-stream"],
            [".aax", "audio/vnd.audible.aax"],
            [".ac3", "audio/ac3"],
            [".aca", "application/octet-stream"],
            [".accda", "application/msaccess.addin"],
            [".accdb", "application/msaccess"],
            [".accdc", "application/msaccess.cab"],
            [".accde", "application/msaccess"],
            [".accdr", "application/msaccess.runtime"],
            [".accdt", "application/msaccess"],
            [".accdw", "application/msaccess.webapplication"],
            [".accft", "application/msaccess.ftemplate"],
            [".acx", "application/internet-property-stream"],
            [".AddIn", "text/xml"],
            [".ade", "application/msaccess"],
            [".adobebridge", "application/x-bridge-url"],
            [".adp", "application/msaccess"],
            [".ADT", "audio/vnd.dlna.adts"],
            [".ADTS", "audio/aac"],
            [".afm", "application/octet-stream"],
            [".ai", "application/postscript"],
            [".aif", "audio/x-aiff"],
            [".aifc", "audio/aiff"],
            [".aiff", "audio/aiff"],
            [".air", "application/vnd.adobe.air-application-installer-package+zip"],
            [".amc", "application/x-mpeg"],
            [".application", "application/x-ms-application"],
            [".art", "image/x-jg"],
            [".asa", "application/xml"],
            [".asax", "application/xml"],
            [".ascx", "application/xml"],
            [".asd", "application/octet-stream"],
            [".asf", "video/x-ms-asf"],
            [".ashx", "application/xml"],
            [".asi", "application/octet-stream"],
            [".asm", "text/plain"],
            [".asmx", "application/xml"],
            [".aspx", "application/xml"],
            [".asr", "video/x-ms-asf"],
            [".asx", "video/x-ms-asf"],
            [".atom", "application/atom+xml"],
            [".au", "audio/basic"],
            [".avi", "video/x-msvideo"],
            [".axs", "application/olescript"],
            [".bas", "text/plain"],
            [".bcpio", "application/x-bcpio"],
            [".bin", "application/octet-stream"],
            [".bmp", "image/bmp"],
            [".c", "text/plain"],
            [".cab", "application/octet-stream"],
            [".caf", "audio/x-caf"],
            [".calx", "application/vnd.ms-office.calx"],
            [".cat", "application/vnd.ms-pki.seccat"],
            [".cc", "text/plain"],
            [".cd", "text/plain"],
            [".cdda", "audio/aiff"],
            [".cdf", "application/x-cdf"],
            [".cer", "application/x-x509-ca-cert"],
            [".chm", "application/octet-stream"],
            [".class", "application/x-java-applet"],
            [".clp", "application/x-msclip"],
            [".cmx", "image/x-cmx"],
            [".cnf", "text/plain"],
            [".cod", "image/cis-cod"],
            [".config", "application/xml"],
            [".contact", "text/x-ms-contact"],
            [".coverage", "application/xml"],
            [".cpio", "application/x-cpio"],
            [".cpp", "text/plain"],
            [".crd", "application/x-mscardfile"],
            [".crl", "application/pkix-crl"],
            [".crt", "application/x-x509-ca-cert"],
            [".cs", "text/plain"],
            [".csdproj", "text/plain"],
            [".csh", "application/x-csh"],
            [".csproj", "text/plain"],
            [".css", "text/css"],
            [".csv", "text/csv"],
            [".cur", "application/octet-stream"],
            [".cxx", "text/plain"],
            [".dat", "application/octet-stream"],
            [".datasource", "application/xml"],
            [".dbproj", "text/plain"],
            [".dcr", "application/x-director"],
            [".def", "text/plain"],
            [".deploy", "application/octet-stream"],
            [".der", "application/x-x509-ca-cert"],
            [".dgml", "application/xml"],
            [".dib", "image/bmp"],
            [".dif", "video/x-dv"],
            [".dir", "application/x-director"],
            [".disco", "text/xml"],
            [".dll", "application/x-msdownload"],
            [".dll.config", "text/xml"],
            [".dlm", "text/dlm"],
            [".doc", "application/msword"],
            [".docm", "application/vnd.ms-word.document.macroEnabled.12"],
            [".docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
            [".dot", "application/msword"],
            [".dotm", "application/vnd.ms-word.template.macroEnabled.12"],
            [".dotx", "application/vnd.openxmlformats-officedocument.wordprocessingml.template"],
            [".dsp", "application/octet-stream"],
            [".dsw", "text/plain"],
            [".dtd", "text/xml"],
            [".dtsConfig", "text/xml"],
            [".dv", "video/x-dv"],
            [".dvi", "application/x-dvi"],
            [".dwf", "drawing/x-dwf"],
            [".dwp", "application/octet-stream"],
            [".dxr", "application/x-director"],
            [".eml", "message/rfc822"],
            [".emz", "application/octet-stream"],
            [".eot", "application/octet-stream"],
            [".eps", "application/postscript"],
            [".etl", "application/etl"],
            [".etx", "text/x-setext"],
            [".evy", "application/envoy"],
            [".exe", "application/octet-stream"],
            [".exe.config", "text/xml"],
            [".fdf", "application/vnd.fdf"],
            [".fif", "application/fractals"],
            [".filters", "Application/xml"],
            [".fla", "application/octet-stream"],
            [".flr", "x-world/x-vrml"],
            [".flv", "video/x-flv"],
            [".fsscript", "application/fsharp-script"],
            [".fsx", "application/fsharp-script"],
            [".generictest", "application/xml"],
            [".gif", "image/gif"],
            [".group", "text/x-ms-group"],
            [".gsm", "audio/x-gsm"],
            [".gtar", "application/x-gtar"],
            [".gz", "application/x-gzip"],
            [".h", "text/plain"],
            [".hdf", "application/x-hdf"],
            [".hdml", "text/x-hdml"],
            [".hhc", "application/x-oleobject"],
            [".hhk", "application/octet-stream"],
            [".hhp", "application/octet-stream"],
            [".hlp", "application/winhlp"],
            [".hpp", "text/plain"],
            [".hqx", "application/mac-binhex40"],
            [".hta", "application/hta"],
            [".htc", "text/x-component"],
            [".htm", "text/html"],
            [".html", "text/html"],
            [".htt", "text/webviewhtml"],
            [".hxa", "application/xml"],
            [".hxc", "application/xml"],
            [".hxd", "application/octet-stream"],
            [".hxe", "application/xml"],
            [".hxf", "application/xml"],
            [".hxh", "application/octet-stream"],
            [".hxi", "application/octet-stream"],
            [".hxk", "application/xml"],
            [".hxq", "application/octet-stream"],
            [".hxr", "application/octet-stream"],
            [".hxs", "application/octet-stream"],
            [".hxt", "text/html"],
            [".hxv", "application/xml"],
            [".hxw", "application/octet-stream"],
            [".hxx", "text/plain"],
            [".i", "text/plain"],
            [".ico", "image/x-icon"],
            [".ics", "application/octet-stream"],
            [".idl", "text/plain"],
            [".ief", "image/ief"],
            [".iii", "application/x-iphone"],
            [".inc", "text/plain"],
            [".inf", "application/octet-stream"],
            [".inl", "text/plain"],
            [".ins", "application/x-internet-signup"],
            [".ipa", "application/x-itunes-ipa"],
            [".ipg", "application/x-itunes-ipg"],
            [".ipproj", "text/plain"],
            [".ipsw", "application/x-itunes-ipsw"],
            [".iqy", "text/x-ms-iqy"],
            [".isp", "application/x-internet-signup"],
            [".ite", "application/x-itunes-ite"],
            [".itlp", "application/x-itunes-itlp"],
            [".itms", "application/x-itunes-itms"],
            [".itpc", "application/x-itunes-itpc"],
            [".IVF", "video/x-ivf"],
            [".jar", "application/java-archive"],
            [".java", "application/octet-stream"],
            [".jck", "application/liquidmotion"],
            [".jcz", "application/liquidmotion"],
            [".jfif", "image/pjpeg"],
            [".jnlp", "application/x-java-jnlp-file"],
            [".jpb", "application/octet-stream"],
            [".jpe", "image/jpeg"],
            [".jpeg", "image/jpeg"],
            [".jpg", "image/jpeg"],
            [".js", "application/x-javascript"],
            [".json", "application/json"],
            [".jsx", "text/jscript"],
            [".jsxbin", "text/plain"],
            [".latex", "application/x-latex"],
            [".library-ms", "application/windows-library+xml"],
            [".lit", "application/x-ms-reader"],
            [".loadtest", "application/xml"],
            [".lpk", "application/octet-stream"],
            [".lsf", "video/x-la-asf"],
            [".lst", "text/plain"],
            [".lsx", "video/x-la-asf"],
            [".lzh", "application/octet-stream"],
            [".m13", "application/x-msmediaview"],
            [".m14", "application/x-msmediaview"],
            [".m1v", "video/mpeg"],
            [".m2t", "video/vnd.dlna.mpeg-tts"],
            [".m2ts", "video/vnd.dlna.mpeg-tts"],
            [".m2v", "video/mpeg"],
            [".m3u", "audio/x-mpegurl"],
            [".m3u8", "audio/x-mpegurl"],
            [".m4a", "audio/m4a"],
            [".m4b", "audio/m4b"],
            [".m4p", "audio/m4p"],
            [".m4r", "audio/x-m4r"],
            [".m4v", "video/x-m4v"],
            [".mac", "image/x-macpaint"],
            [".mak", "text/plain"],
            [".man", "application/x-troff-man"],
            [".manifest", "application/x-ms-manifest"],
            [".map", "text/plain"],
            [".master", "application/xml"],
            [".mda", "application/msaccess"],
            [".mdb", "application/x-msaccess"],
            [".mde", "application/msaccess"],
            [".mdp", "application/octet-stream"],
            [".me", "application/x-troff-me"],
            [".mfp", "application/x-shockwave-flash"],
            [".mht", "message/rfc822"],
            [".mhtml", "message/rfc822"],
            [".mid", "audio/mid"],
            [".midi", "audio/mid"],
            [".mix", "application/octet-stream"],
            [".mk", "text/plain"],
            [".mmf", "application/x-smaf"],
            [".mno", "text/xml"],
            [".mny", "application/x-msmoney"],
            [".mod", "video/mpeg"],
            [".mov", "video/quicktime"],
            [".movie", "video/x-sgi-movie"],
            [".mp2", "video/mpeg"],
            [".mp2v", "video/mpeg"],
            [".mp3", "audio/mpeg"],
            [".mp4", "video/mp4"],
            [".mp4v", "video/mp4"],
            [".mpa", "video/mpeg"],
            [".mpe", "video/mpeg"],
            [".mpeg", "video/mpeg"],
            [".mpf", "application/vnd.ms-mediapackage"],
            [".mpg", "video/mpeg"],
            [".mpp", "application/vnd.ms-project"],
            [".mpv2", "video/mpeg"],
            [".mqv", "video/quicktime"],
            [".ms", "application/x-troff-ms"],
            [".msi", "application/octet-stream"],
            [".mso", "application/octet-stream"],
            [".mts", "video/vnd.dlna.mpeg-tts"],
            [".mtx", "application/xml"],
            [".mvb", "application/x-msmediaview"],
            [".mvc", "application/x-miva-compiled"],
            [".mxp", "application/x-mmxp"],
            [".nc", "application/x-netcdf"],
            [".nsc", "video/x-ms-asf"],
            [".nws", "message/rfc822"],
            [".ocx", "application/octet-stream"],
            [".oda", "application/oda"],
            [".odc", "text/x-ms-odc"],
            [".odh", "text/plain"],
            [".odl", "text/plain"],
            [".odp", "application/vnd.oasis.opendocument.presentation"],
            [".ods", "application/oleobject"],
            [".odt", "application/vnd.oasis.opendocument.text"],
            [".one", "application/onenote"],
            [".onea", "application/onenote"],
            [".onepkg", "application/onenote"],
            [".onetmp", "application/onenote"],
            [".onetoc", "application/onenote"],
            [".onetoc2", "application/onenote"],
            [".orderedtest", "application/xml"],
            [".osdx", "application/opensearchdescription+xml"],
            [".p10", "application/pkcs10"],
            [".p12", "application/x-pkcs12"],
            [".p7b", "application/x-pkcs7-certificates"],
            [".p7c", "application/pkcs7-mime"],
            [".p7m", "application/pkcs7-mime"],
            [".p7r", "application/x-pkcs7-certreqresp"],
            [".p7s", "application/pkcs7-signature"],
            [".pbm", "image/x-portable-bitmap"],
            [".pcast", "application/x-podcast"],
            [".pct", "image/pict"],
            [".pcx", "application/octet-stream"],
            [".pcz", "application/octet-stream"],
            [".pdf", "application/pdf"],
            [".pfb", "application/octet-stream"],
            [".pfm", "application/octet-stream"],
            [".pfx", "application/x-pkcs12"],
            [".pgm", "image/x-portable-graymap"],
            [".pic", "image/pict"],
            [".pict", "image/pict"],
            [".pkgdef", "text/plain"],
            [".pkgundef", "text/plain"],
            [".pko", "application/vnd.ms-pki.pko"],
            [".pls", "audio/scpls"],
            [".pma", "application/x-perfmon"],
            [".pmc", "application/x-perfmon"],
            [".pml", "application/x-perfmon"],
            [".pmr", "application/x-perfmon"],
            [".pmw", "application/x-perfmon"],
            [".png", "image/png"],
            [".pnm", "image/x-portable-anymap"],
            [".pnt", "image/x-macpaint"],
            [".pntg", "image/x-macpaint"],
            [".pnz", "image/png"],
            [".pot", "application/vnd.ms-powerpoint"],
            [".potm", "application/vnd.ms-powerpoint.template.macroEnabled.12"],
            [".potx", "application/vnd.openxmlformats-officedocument.presentationml.template"],
            [".ppa", "application/vnd.ms-powerpoint"],
            [".ppam", "application/vnd.ms-powerpoint.addin.macroEnabled.12"],
            [".ppm", "image/x-portable-pixmap"],
            [".pps", "application/vnd.ms-powerpoint"],
            [".ppsm", "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
            [".ppsx", "application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
            [".ppt", "application/vnd.ms-powerpoint"],
            [".pptm", "application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
            [".pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"],
            [".prf", "application/pics-rules"],
            [".prm", "application/octet-stream"],
            [".prx", "application/octet-stream"],
            [".ps", "application/postscript"],
            [".psc1", "application/PowerShell"],
            [".psd", "application/octet-stream"],
            [".psess", "application/xml"],
            [".psm", "application/octet-stream"],
            [".psp", "application/octet-stream"],
            [".pub", "application/x-mspublisher"],
            [".pwz", "application/vnd.ms-powerpoint"],
            [".qht", "text/x-html-insertion"],
            [".qhtm", "text/x-html-insertion"],
            [".qt", "video/quicktime"],
            [".qti", "image/x-quicktime"],
            [".qtif", "image/x-quicktime"],
            [".qtl", "application/x-quicktimeplayer"],
            [".qxd", "application/octet-stream"],
            [".ra", "audio/x-pn-realaudio"],
            [".ram", "audio/x-pn-realaudio"],
            [".rar", "application/octet-stream"],
            [".ras", "image/x-cmu-raster"],
            [".rat", "application/rat-file"],
            [".rc", "text/plain"],
            [".rc2", "text/plain"],
            [".rct", "text/plain"],
            [".rdlc", "application/xml"],
            [".resx", "application/xml"],
            [".rf", "image/vnd.rn-realflash"],
            [".rgb", "image/x-rgb"],
            [".rgs", "text/plain"],
            [".rm", "application/vnd.rn-realmedia"],
            [".rmi", "audio/mid"],
            [".rmp", "application/vnd.rn-rn_music_package"],
            [".roff", "application/x-troff"],
            [".rpm", "audio/x-pn-realaudio-plugin"],
            [".rqy", "text/x-ms-rqy"],
            [".rtf", "application/rtf"],
            [".rtx", "text/richtext"],
            [".ruleset", "application/xml"],
            [".s", "text/plain"],
            [".safariextz", "application/x-safari-safariextz"],
            [".scd", "application/x-msschedule"],
            [".sct", "text/scriptlet"],
            [".sd2", "audio/x-sd2"],
            [".sdp", "application/sdp"],
            [".sea", "application/octet-stream"],
            [".searchConnector-ms", "application/windows-search-connector+xml"],
            [".setpay", "application/set-payment-initiation"],
            [".setreg", "application/set-registration-initiation"],
            [".settings", "application/xml"],
            [".sgimb", "application/x-sgimb"],
            [".sgml", "text/sgml"],
            [".sh", "application/x-sh"],
            [".shar", "application/x-shar"],
            [".shtml", "text/html"],
            [".sit", "application/x-stuffit"],
            [".sitemap", "application/xml"],
            [".skin", "application/xml"],
            [".sldm", "application/vnd.ms-powerpoint.slide.macroEnabled.12"],
            [".sldx", "application/vnd.openxmlformats-officedocument.presentationml.slide"],
            [".slk", "application/vnd.ms-excel"],
            [".sln", "text/plain"],
            [".slupkg-ms", "application/x-ms-license"],
            [".smd", "audio/x-smd"],
            [".smi", "application/octet-stream"],
            [".smx", "audio/x-smd"],
            [".smz", "audio/x-smd"],
            [".snd", "audio/basic"],
            [".snippet", "application/xml"],
            [".snp", "application/octet-stream"],
            [".sol", "text/plain"],
            [".sor", "text/plain"],
            [".spc", "application/x-pkcs7-certificates"],
            [".spl", "application/futuresplash"],
            [".src", "application/x-wais-source"],
            [".srf", "text/plain"],
            [".SSISDeploymentManifest", "text/xml"],
            [".ssm", "application/streamingmedia"],
            [".sst", "application/vnd.ms-pki.certstore"],
            [".stl", "application/vnd.ms-pki.stl"],
            [".sv4cpio", "application/x-sv4cpio"],
            [".sv4crc", "application/x-sv4crc"],
            [".svc", "application/xml"],
            [".swf", "application/x-shockwave-flash"],
            [".t", "application/x-troff"],
            [".tar", "application/x-tar"],
            [".tcl", "application/x-tcl"],
            [".testrunconfig", "application/xml"],
            [".testsettings", "application/xml"],
            [".tex", "application/x-tex"],
            [".texi", "application/x-texinfo"],
            [".texinfo", "application/x-texinfo"],
            [".tgz", "application/x-compressed"],
            [".thmx", "application/vnd.ms-officetheme"],
            [".thn", "application/octet-stream"],
            [".tif", "image/tiff"],
            [".tiff", "image/tiff"],
            [".tlh", "text/plain"],
            [".tli", "text/plain"],
            [".toc", "application/octet-stream"],
            [".tr", "application/x-troff"],
            [".trm", "application/x-msterminal"],
            [".trx", "application/xml"],
            [".ts", "video/vnd.dlna.mpeg-tts"],
            [".tsv", "text/tab-separated-values"],
            [".ttf", "application/octet-stream"],
            [".tts", "video/vnd.dlna.mpeg-tts"],
            [".txt", "text/plain"],
            [".u32", "application/octet-stream"],
            [".uls", "text/iuls"],
            [".user", "text/plain"],
            [".ustar", "application/x-ustar"],
            [".vb", "text/plain"],
            [".vbdproj", "text/plain"],
            [".vbk", "video/mpeg"],
            [".vbproj", "text/plain"],
            [".vbs", "text/vbscript"],
            [".vcf", "text/x-vcard"],
            [".vcproj", "Application/xml"],
            [".vcs", "text/plain"],
            [".vcxproj", "Application/xml"],
            [".vddproj", "text/plain"],
            [".vdp", "text/plain"],
            [".vdproj", "text/plain"],
            [".vdx", "application/vnd.ms-visio.viewer"],
            [".vml", "text/xml"],
            [".vscontent", "application/xml"],
            [".vsct", "text/xml"],
            [".vsd", "application/vnd.visio"],
            [".vsi", "application/ms-vsi"],
            [".vsix", "application/vsix"],
            [".vsixlangpack", "text/xml"],
            [".vsixmanifest", "text/xml"],
            [".vsmdi", "application/xml"],
            [".vspscc", "text/plain"],
            [".vss", "application/vnd.visio"],
            [".vsscc", "text/plain"],
            [".vssettings", "text/xml"],
            [".vssscc", "text/plain"],
            [".vst", "application/vnd.visio"],
            [".vstemplate", "text/xml"],
            [".vsto", "application/x-ms-vsto"],
            [".vsw", "application/vnd.visio"],
            [".vsx", "application/vnd.visio"],
            [".vtx", "application/vnd.visio"],
            [".wav", "audio/wav"],
            [".wave", "audio/wav"],
            [".wax", "audio/x-ms-wax"],
            [".wbk", "application/msword"],
            [".wbmp", "image/vnd.wap.wbmp"],
            [".wcm", "application/vnd.ms-works"],
            [".wdb", "application/vnd.ms-works"],
            [".wdp", "image/vnd.ms-photo"],
            [".webarchive", "application/x-safari-webarchive"],
            [".webtest", "application/xml"],
            [".wiq", "application/xml"],
            [".wiz", "application/msword"],
            [".wks", "application/vnd.ms-works"],
            [".WLMP", "application/wlmoviemaker"],
            [".wlpginstall", "application/x-wlpg-detect"],
            [".wlpginstall3", "application/x-wlpg3-detect"],
            [".wm", "video/x-ms-wm"],
            [".wma", "audio/x-ms-wma"],
            [".wmd", "application/x-ms-wmd"],
            [".wmf", "application/x-msmetafile"],
            [".wml", "text/vnd.wap.wml"],
            [".wmlc", "application/vnd.wap.wmlc"],
            [".wmls", "text/vnd.wap.wmlscript"],
            [".wmlsc", "application/vnd.wap.wmlscriptc"],
            [".wmp", "video/x-ms-wmp"],
            [".wmv", "video/x-ms-wmv"],
            [".wmx", "video/x-ms-wmx"],
            [".wmz", "application/x-ms-wmz"],
            [".wpl", "application/vnd.ms-wpl"],
            [".wps", "application/vnd.ms-works"],
            [".wri", "application/x-mswrite"],
            [".wrl", "x-world/x-vrml"],
            [".wrz", "x-world/x-vrml"],
            [".wsc", "text/scriptlet"],
            [".wsdl", "text/xml"],
            [".wvx", "video/x-ms-wvx"],
            [".x", "application/directx"],
            [".xaf", "x-world/x-vrml"],
            [".xaml", "application/xaml+xml"],
            [".xap", "application/x-silverlight-app"],
            [".xbap", "application/x-ms-xbap"],
            [".xbm", "image/x-xbitmap"],
            [".xdr", "text/plain"],
            [".xht", "application/xhtml+xml"],
            [".xhtml", "application/xhtml+xml"],
            [".xla", "application/vnd.ms-excel"],
            [".xlam", "application/vnd.ms-excel.addin.macroEnabled.12"],
            [".xlc", "application/vnd.ms-excel"],
            [".xld", "application/vnd.ms-excel"],
            [".xlk", "application/vnd.ms-excel"],
            [".xll", "application/vnd.ms-excel"],
            [".xlm", "application/vnd.ms-excel"],
            [".xls", "application/vnd.ms-excel"],
            [".xlsb", "application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
            [".xlsm", "application/vnd.ms-excel.sheet.macroEnabled.12"],
            [".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
            [".xlt", "application/vnd.ms-excel"],
            [".xltm", "application/vnd.ms-excel.template.macroEnabled.12"],
            [".xltx", "application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
            [".xlw", "application/vnd.ms-excel"],
            [".xml", "text/xml"],
            [".xmta", "application/xml"],
            [".xof", "x-world/x-vrml"],
            [".XOML", "text/plain"],
            [".xpm", "image/x-xpixmap"],
            [".xps", "application/vnd.ms-xpsdocument"],
            [".xrm-ms", "text/xml"],
            [".xsc", "application/xml"],
            [".xsd", "text/xml"],
            [".xsf", "text/xml"],
            [".xsl", "text/xml"],
            [".xslt", "text/xml"],
            [".xsn", "application/octet-stream"],
            [".xss", "application/xml"],
            [".xtp", "application/octet-stream"],
            [".xwd", "image/x-xwindowdump"],
            [".z", "application/x-compress"],
            [".zip", "application/x-zip-compressed"]
    ];
    
    // ----------------------- End of Extensions to MIME --------- //
    

    【讨论】:

    • - 我正在尝试使用 pdf 文件。文件正在下载,但它总是损坏。有什么建议?谢谢
    【解决方案15】:

    也许只是让您的 javascript 打开一个只下载文件的页面,例如当您将下载链接拖到新标签时:

    Window.open("https://www.MyServer.
    Org/downloads/ardiuno/WgiWho=?:8080")
    

    随着打开的窗口打开一个自动关闭的下载页面。

    【讨论】:

    • 这会创建一个弹出窗口,大多数浏览器都会阻止该窗口
    • 没错,fs-browsers 不是 :)
    【解决方案16】:

    您也可以使用包fs-browsers
    它有很好的客户端下载方法。
    它是这样的:

    import { downloadFile } from 'fs-browsers';
    downloadFile(url-to-the-file);

    【讨论】:

    • ?,这个好用又方便。
    【解决方案17】:

    对我来说,这在 chrome v72 中测试正常

    function down_file(url,name){
    var a = $("<a>")
        .attr("href", url)
        .attr("download", name)
        .appendTo("body");
    a[0].click();
    a.remove();
    }
    
    down_file('https://www.useotools.com/uploads/nulogo[1].png','logo.png')
    

    【讨论】:

    • 这与几年前Imagine Breaker's answer 中显示的方法相同,但增加了需要 jQuery 的缺点。
    • 我们可以在正文部分通过url传递一些请求有效负载吗?这就像使用 POST 请求访问 url。在这种情况下我们如何传递字典?
    【解决方案18】:

    尝试下载文件时可能会发生很多小事情。仅浏览器之间的不一致就是一场噩梦。我最终使用了这个很棒的小图书馆。 https://github.com/rndme/download

    它的好处在于它不仅适用于 url,而且适用于您要下载的客户端数据。

    1. 文本字符串
    2. 文本数据URL
    3. 文本块
    4. 文本数组
    5. html 字符串
    6. html blob
    7. ajax 回调
    8. 二进制文件

    【讨论】:

      【解决方案19】:

      您可以简单地使用 HTML 中的 Download 属性。使用好的 ol' Javascript,您可以使用此功能直接下载文件。锚标签的下载属性应该指向要下载的文件所在的链接。

      首先,将 URL 指向您的资源路径:

      var url = 'your url goes here';
      

      创建一个锚标签,需要的属性如下:

      var elem = document.createElement('a');
      elem.href = url;
      elem.download = url;
      elem.id="downloadAnchor";
      

      将锚标记附加到网页的正文元素。

      document.body.appendChild(elem);
      

      现在以编程方式触发点击事件。点击锚标签会触发下载。

      $('#downloadAnchor').click();
      

      把它们放在一起:

      var url = 'your url goes here';
      var elem = document.createElement('a');
      elem.href = url;
      elem.download = url;
      elem.id="downloadAnchor";
      document.body.appendChild(elem);
      $('#downloadAnchor').click();
      

      附加信息:上面的代码没有什么特别之处,只是在 Chrome Devtools 的控制台上运行的客户端 JavaScript,但功能强大并且还开辟了很多可能性,例如网页抓取。

      例如在 Devtools 控制台中执行的以下代码块将在新选项卡中打开页面中的所有链接:只需转到 this webpage ,打开 devtools 并在浏览器控制台中运行此脚本并观察 JavaScript 的强大功能。 (注意:以下代码仅用于教育目的。)

      确保您为该网站启用弹出窗口,否则默认弹出窗口阻止程序会禁用您的锚点点击。

      var links = document.getElementsByClassName("_3ATBKe");
      for(var i=0;i<links.length;i++){
          var title = document.getElementsByClassName("_3ATBKe")[i].firstElementChild.firstElementChild.innerText.replaceAll('|','-').replaceAll(':','x');
          console.log('Opening..'+title);
          links[i].firstElementChild.click();
      }
      

      注意:这不仅限于锚点点击,您几乎可以下载您在网页上找到的任何内容。如果您的网页上加载了某些内容(图像、音频、视频),您可能可以编写一个脚本来下载它,即使没有从 UI 提供给您。

      【讨论】:

        【解决方案20】:

        hitesh 在 2013 年 12 月 30 日提交的答案确实有效。它只需要一点调整:

        PHP 文件可以调用自身。也就是说,只需创建一个名为 saveAs.php 的文件,并将这段代码放入其中...

                <a href="saveAs.php?file_source=YourDataFile.pdf">Download pdf here</a>
        
            <?php
                if (isset($_GET['file_source'])) {
                    $fullPath = $_GET['file_source'];
                    if($fullPath) {
                        $fsize = filesize($fullPath);
                        $path_parts = pathinfo($fullPath);
                        $ext = strtolower($path_parts["extension"]);
                        switch ($ext) {
                            case "pdf":
                            header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
                            header("Content-type: application/pdf"); // add here more headers for diff. extensions
                            break;
                            default;
                            header("Content-type: application/octet-stream");
                            header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
                        }
                        if($fsize) {//checking if file size exist
                          header("Content-length: $fsize");
                        }
                        readfile($fullPath);
                        exit;
                    }
                }
            ?>
        

        【讨论】:

          【解决方案21】:

          这些函数用在stacktrace.js:

          /**
           * Try XHR methods in order and store XHR factory.
           *
           * @return <Function> XHR function or equivalent
           */
          var createXMLHTTPObject = function() {
              var xmlhttp, XMLHttpFactories = [
                  function() {
                      return new XMLHttpRequest();
                  }, function() {
                      return new ActiveXObject('Msxml2.XMLHTTP');
                  }, function() {
                      return new ActiveXObject('Msxml3.XMLHTTP');
                  }, function() {
                      return new ActiveXObject('Microsoft.XMLHTTP');
                  }
              ];
              for (var i = 0; i < XMLHttpFactories.length; i++) {
                  try {
                      xmlhttp = XMLHttpFactories[i]();
                      // Use memoization to cache the factory
                      createXMLHTTPObject = XMLHttpFactories[i];
                      return xmlhttp;
                  } catch (e) {
                  }
              }
          }
          
          /**
           * @return the text from a given URL
           */
          function ajax(url) {
              var req = createXMLHTTPObject();
              if (req) {
                  try {
                      req.open('GET', url, false);
                      req.send(null);
                      return req.responseText;
                  } catch (e) {
                  }
              }
              return '';
          }
          

          【讨论】:

          • 这...似乎只适用于 XHR,而不是文件下载?我在这里看不到相关性。
          【解决方案22】:

          我建议您使用 mousedown 事件,该事件在单击事件之前调用。这样,浏览器自然地处理了点击事件,从而避免了任何代码的怪异:

          (function ($) {
          
          
              // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
              $(document).ready(function () {
          
                  var url = '/private/downloads/myfile123.pdf';
                  $("a#someID").on('mousedown', function () {
                      $(this).attr("href", url);
                  });
          
              });
          })(jQuery);
          

          【讨论】:

            【解决方案23】:

            Corbacho 的优秀解决方案,我刚刚适应了摆脱 var

            function downloadURL(url) {
                if( $('#idown').length ){
                    $('#idown').attr('src',url);
                }else{
                    $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
                }
            }
            

            【讨论】:

              【解决方案24】:

              Firefox 和 Chrome 测试:

              var link = document.createElement('a');
              link.download = 'fileName.ext'
              link.href = 'http://down.serv/file.ext';
              
              // Because firefox not executing the .click() well
              // We need to create mouse event initialization.
              var clickEvent = document.createEvent("MouseEvent");
              clickEvent.initEvent("click", true, true);
              
              link.dispatchEvent(clickEvent);
              

              这其实是firefox的“chrome”方式解决方案(我没有在其他浏览器上测试过,所以请留下cmets关于可编译性)

              【讨论】:

                【解决方案25】:

                使用 FORM 标记我取得了很好的效果,因为它可以在任何地方使用,而且您不必在服务器上创建临时文件。该方法的工作原理是这样的。

                在客户端(页面 HTML)上,您创建一个像这样的不可见表单

                <form method="POST" action="/download.php" target="_blank" id="downloadForm">
                    <input type="hidden" name="data" id="csv">
                </form>
                

                然后你将这段 Javascript 代码添加到你的按钮中:

                $('#button').click(function() {
                     $('#csv').val('---your data---');
                     $('#downloadForm').submit();
                }
                

                在服务器端,download.php 中有以下 PHP 代码:

                <?php
                header('Content-Type: text/csv');
                header('Content-Description: File Transfer');
                header('Content-Type: application/octet-stream');
                header('Content-Disposition: attachment; filename=out.csv');
                header('Content-Transfer-Encoding: binary');
                header('Connection: Keep-Alive');
                header('Expires: 0');
                header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
                header('Pragma: public');
                header('Content-Length: ' . strlen($data));
                
                echo $_REQUEST['data'];
                exit();
                

                您甚至可以像这样创建数据的 zip 文件:

                <?php
                
                $file = tempnam("tmp", "zip");
                
                $zip = new ZipArchive();
                $zip->open($file, ZipArchive::OVERWRITE);
                $zip->addFromString('test.csv', $_REQUEST['data']);
                $zip->close();
                
                header('Content-Type: application/zip');
                header('Content-Length: ' . filesize($file));
                header('Content-Disposition: attachment; filename="file.zip"');
                readfile($file);
                unlink($file); 
                

                最好的部分是它不会在您的服务器上留下任何残留文件,因为一切都是动态创建和销毁的!

                【讨论】:

                  【解决方案26】:
                  let args = {"data":htmlData,"filename":exampleName}
                  

                  创建 HTMl 文件并下载

                  window.downloadHTML = function(args) {
                  var data, filename, link;
                  var csv = args.data;
                  if (csv == null) return;
                  filename = args.filename || 'report.html';
                  data = 'data:text/html;charset=utf-8,' + encodeURIComponent(csv);
                  console.log(data);
                  link = document.createElement('a');
                  link.setAttribute('href', data);
                  link.setAttribute('download', filename);
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);}
                  

                  创建和下载 CSV

                  window.downloadCSV = function(args) {
                  var data, filename, link;
                  var csv = args.data;
                  if (csv == null) return;
                  filename = args.filename || 'report.csv';
                  if (!csv.match(/^data:text\/csv/i)) {
                      csv = 'data:text/csv;charset=utf-8,' + csv;
                  }
                  data = encodeURI(csv);
                  link = document.createElement('a');
                  link.setAttribute('href', data);
                  link.setAttribute('download', filename);
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
                  

                  }

                  【讨论】:

                    【解决方案27】:

                    只传递文件的链接。它将以其原始名称下载文件。

                    function downloadFileWithLink(href) {
                        var link = document.createElement("a");
                        let name = (href?.split("/") || [])
                        name = name[name?.length-1]
                        link.setAttribute('download', name);
                        link.href = href;
                        document.body.appendChild(link);
                        link.click();
                        link.remove();
                    }
                    

                    【讨论】:

                      【解决方案28】:

                      您必须从服务器和客户端(网络应用程序)两个方面进行操作。

                      从服务器,设置名为Content-Dispositionhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition的标头

                      // nodejs express
                        res.set('Content-Disposition', `attachment; filename="${self.creationName}"`)
                      

                      使用上面的标头,服务器会告诉浏览器响应是一个文件,应该用给定的名称下载并保存它,否则浏览器可能会将文件保存为“附件(1).zip”之类的东西

                      接下来我们看看客户端,我们创建一个锚链接并自动点击它。

                      function downloadThroughAnchorLink(downloadUrl: string, fileName: string) {
                          const a = document.createElement('a')
                          a.href = downloadUrl;
                          // We provided a header called Content-Disposition so we dont need to set "a.download" here
                          // a.download = fileName || 'download'
                          a.click()
                      }
                      
                      

                      应该可以的。

                      【讨论】:

                        【解决方案29】:

                        注意:并非所有浏览器都支持。

                        我一直在寻找一种使用 jquery 下载文件的方法,而不必从一开始就在 href 属性中设置文件 url。

                        jQuery('<a/>', {
                            id: 'downloadFile',
                            href: 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png',
                            style: 'display:hidden;',
                            download: ''
                        }).appendTo('body');
                        
                        $("#downloadFile")[0].click();
                        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

                        【讨论】:

                          【解决方案30】:

                          我在没有 JQuery 的情况下使用 @rakaloof's solution(因为 you don't need it here)。谢谢你的主意!这是一个基于 vanillaJS 表单的解决方案:

                          const uri = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav';
                          let form = document.createElement("form");
                          form.setAttribute('action', uri);
                          document.body.appendChild(form);
                          form.submit();
                          document.body.removeChild(document.body.lastElementChild);

                          【讨论】:

                            猜你喜欢
                            • 2012-10-03
                            • 1970-01-01
                            • 1970-01-01
                            • 2010-11-20
                            • 2010-09-25
                            • 2018-11-02
                            • 2013-08-05
                            • 1970-01-01
                            相关资源
                            最近更新 更多