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

IE和iOS Safari不支持下载属性

IE <10:

命令SaveAs使用execCommand可以通过使元素的内容可下载来实现.

缺点:

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

IE> = 10

使用msSaveBlob,它是一种允许通过发送此标头来保存Blob或文件的方法:

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

使用Blob和msSaveBlob检查本地保存文件

缺点:

• 需要定义一个Blob

其它浏览器

如果您不想自己实现所有这些,那么有一个很好的库FileSaver.js来保存客户端生成的文件.它支持Firefox,Chrome,Android for Android,IE 10 +,Opera和Safari.对于IE <10,库中有一个fork,它添加了saveTextAs来保存文本文件(.htm,.html,.txt)

跨浏览器解决方案

接收文件名,数据,meme类型的服务器端脚本然后使用标头发送文件 Content-Disposition: attachment; filename=FILENAME

Answer 2

IE不支持download标签。

不过，你可以使用一个丑陋的技巧。

• 创建一个不可见的iframe：

  <iframe id="dummy" style="display:none; visibility:hidden"></iframe>
  

• 将数据写入 iframe 的document：

  var ifd = document.getElementById('dummy').contentDocument;
  ifd.open('text/plain', 'replace');
  ifd.write('whatever you want to be in the file');
  ifd.close();
  

• 使用execCommand保存文件（实际上是提示另存为对话框）：

  ifd.execCommand('SaveAs', true, 'request.bin');
  

请注意，这execCommand在 IE11 中不起作用。我知道完美正确地检测浏览器几乎是不可能的。但是，如果代码中文件保存失败，您可以尝试将此作为备份例程。