IE下载文件 [英] IE download file

问题描述

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

HTML：

  < div class =fRightstyle =margin-left：5px; margin-rigth：5px> 
< input type =buttonvalue =Request Fileid =chReqFileBtnonclick =handleClick/> 
< a href =＃id =challengeReqFileAnchorstyle =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'，$ b $'data'：JSON.stringify（{'code'：code，'quantity'：quantity}），$ b $'success'：function（response ，状态，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中完成同样的行为？ / p>

解决方案

可以使用Chrome和Firefox支持的下载属性

IE< 10：

命令另存为使用 execCommand 可以做的伎俩，通过使元素的内容可下载。

缺点：

• 在Win7上运行的一些IE版本中存在的问题[我不知道它是否已修复这里]


• 需要一个包含数据的DOM元素
  $ b

  IE> = 10

  
  
  

  使用 msSaveBlob ，它是一种允许通过发送这个头文件来保存Blob或文件的方法：

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

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

  
  
  < h3>缺点：
  
  
  
  
  • 需要定义一个Blob
    
    
    

    其他浏览器

    
    
    

    如果你不想自己实现所有的功能，就有一个很好的库 FileSaver.js 在客户端保存生成的文件。它支持Firefox，Chrome，Chrome for Android，IE 10+，Opera和Safari。对于IE< 10，存在叉的库，其添加 saveTextAs 以保存文本文件（.htm，.html ，.txt）
    
    

    跨浏览器解决方案

    
    
    

    接收文件名，数据和模因类型的服务器端脚本，然后发送头文件 Content-Disposition：attachment; filename = FILENAME

    
    

    Using the following lines of code I am able to download a file in the response of a Ajax call in Firefox, Chrome, Opera. However in IE the href attribute download is not supported. Therefore the below does not work in 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);  
    }
    

    What options would I have to accomplish the same behavior in IE as well?

    解决方案

    Can I use points that download attribute is supported in Chrome and firefox.

    IE<10:

    Command SaveAs using execCommand can do the trick, by making element's contents downloadable.

    Cons:

    • Problems in some versions of IE running on Win7 [I don't know if it's fixed Here]
    • Need a DOM element to contain data

    IE>=10

    Using msSaveBlob, it's a method that allows to save Blob or File by sending this headers:

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

    Check Saving files locally using Blob and msSaveBlob

    Cons:

    • Need a to define a Blob

    Other browsers

    If you don't want to implement all that by yourself, there is a nice library FileSaver.js to save generated files on client side. It supports Firefox, Chrome, Chrome for Android, IE 10+, Opera and Safari. For IE<10 there is a fork of the library that adds saveTextAs to save text files (.htm, .html, .txt)

    Cross browsers solution

    A server side script that receives filename, data, meme type then send the file with the header Content-Disposition: attachment; filename=FILENAME

    这篇关于IE下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！