js下载文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js下载文件相关的知识,希望对你有一定的参考价值。

本文的前提是:后台给的是一个可以下载的url的情况下的下载:

怎样的文件url才能触发浏览器的下载行为?(转自SF

能触发浏览器下载的url有两类:

  • response header中指定了Content-Dispositionattachment,它表示让浏览器把响应体作为附件下载到本地 (一般Content-Disposition还会指定filename, 下载的文件默认就是filename指定的名字)

  • response header中指定了Content-Type 为 application/octet-stream(无类型) 或者 application/zip(下载zip包时)以及其它几个不常见类型 (其中还有浏览器差异),其中 application/octet-stream表示http response为二进制流(没指定明确的type), 需要下载到本地, 由系统决定或者用户手动指定打开方式。

在这种前提下,只需要浏览器请求了这个地址,都会自动下载,具体的方式如下:

1、iframe   加载请求此地址时会自动下载  //据说兼容先较好,推荐,使用的时候吧iframe设置为display;none即可

  <iframe name="hehe" src=‘下载url‘></iframe>

2、a     点击请求此地址时会自动下载

  <a href="下载url">下载</a>

  H5的download属性 <a download href="下载url">下载</a> 这时候,如果返回的是img这种浏览器可以打开的文件时,也会下载(否则会直接打开)

3、form    发起submit请求此地址时会自动下载

<form 
   action="下载ur"
   method="get" 
>
   <button type="submit">下载</button>
</form>

4、window.location.href  赋值为此地址时会自动下载 ,如果是其他地址,会跳转,但,当是下载的url,浏览器会发起请求,下载下来,并且不会改变本页的 window.location.href

  window.location.href = “下载url”

4、window.open      赋值为此地址时会自动下载 ,但会先打开新标签页再下载再关闭新标签页,体验不佳

  window.open = “下载url”

 

 

总之:只要是下载的url,只要让浏览器发起请求,都会实现下载的功能;具体是什么原因,有待后期的学习。(我司是汪大神,分分钟就说出了这个规律,想必必然有基础理论的支持,也许是HTTP请求、或者后台知识的)

以上是关于js下载文件的主要内容,如果未能解决你的问题,请参考以下文章

怎么在js中挂马

vscode代码片段生成vue模板

完全下载文件时,将下载的文件从一个片段传递到另一个片段

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

小程序各种功能代码片段整理---持续更新

js代码片段: utils/lcoalStorage/cookie