javascript - IE下载文件

Question

使用以下代码行，我可以在 Firefox、Chrome、Opera 中的 Ajax 调用响应中下载文件。但是在 IE 中，不支持 href 属性 download。因此，以下内容在 IE 中不起作用。

HTML:

 <div class="fRight" style="margin-left:5px; margin-rigth:5px" >
    <input type="button" value="Request File"  id = "chReqFileBtn"  onclick = "handleClick"/>
    <a href="#" id="challengeReqFileAnchor" style="visibility: hidden"></a>
 </div>

JavaScript:

function handleClick()
{
    var code = $('#code').val();
    var quantity = $('#quantity').val();

    var req = $.ajax(
    {
        'type': 'POST',
        'url' : $apiBasePath+'config/challenge-file',
         contentType : 'application/json',
        'data': JSON.stringify({'code':code, 'quantity':quantity}),
        'success':function(response, status, xhr)
        {
            var code = xhr.getResponseHeader('Operation-Code');

            var anch = $('#challengeReqFileAnchor');
            anch.attr(
            {
                "download" : 'request.bin',
                "href" : "data:text/plain," + response       
            });
            anch.get(0).click();
        },
        'error': function(request,status,errorThrown) 
        {
           ......
        }
    });
    $pendingReqs.push(req);  
}

要在 IE 中实现相同的行为，我还需要哪些选项？

Answer 1

Download attribute IE 和 iOS Safari 不支持

IE<10:

命令 SaveAs使用 execCommand可以通过使元素的内容可下载来达到目的。

缺点:

• 在 Win7 上运行的某些版本的 IE 中的问题 [我不知道是否修复了 Here]
• 需要一个 DOM 元素来包含数据

IE>=10

使用 msSaveBlob ，这是一种允许通过发送此 header 来保存 Blob 或文件的方法:

Content-Length: <blob.size>
Content-Type: <blob.type>
Content-Disposition: attachment;filename=<defaultName>
X-Download-Options: noopen

检查 Saving files locally using Blob and msSaveBlob

缺点:

• 需要定义一个 Blob

其他浏览器

如果您不想自己实现所有这些，有一个不错的库 FileSaver.js在客户端保存生成的文件。它支持 Firefox、Chrome、Android 版 Chrome、IE 10+、Opera 和 Safari。对于 IE <10，有一个库的分支添加了 saveTextAs保存文本文件(.htm、.html、.txt)

跨浏览器解决方案

一个服务器端脚本，它接收文件名、数据、模因类型，然后发送带有标题的文件 Content-Disposition: attachment;文件名=文件名