幸运蛋蛋pc开奖
这篇文章主要介绍了通过JavaScript下载文件到本地的方法(单文件),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在做一个文件下载的功能,这里把做的过程中用的技术和坑简要总结下。

1. 单文件下载(a标签)

同源单文件

针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件

 const elt = document.createElement('a');
 elt.setAttribute('href', url);
 elt.setAttribute('download', 'file.png');
 elt.style.display = 'none';
 document.body.appendChild(elt);
 elt.click();
 document.body.removeChild(elt);

但是这个方案并不适用于非同源的资源,此时它相当于普通的超链接,点击会跳转到资源页面,而不是下载。

非同源?#35745;?/strong>

如果不存在CORS问题, 可以借助Blob实现下载(构造xhr请求文件地址, 以Blob的形式接收Response):

function downloadWithBlob(url) {
 fetch(url).then(res => res.blob().then(blob => {
  var a = document.createElement('a');
  var url = window.URL.createObjectURL(blob);
  var filename = 'file.png';
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
 }));
}

如果存在CORS问题,可以考虑使用 canvas 将?#35745;?#36716;换成 base64 编码之后再通过 标签的 download 属性下载

function downloadPic(url) {
 const img = new Image;
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);

  const elt = document.createElement('a');
  elt.setAttribute('href', canvas.toDataURL('image/png'));
  elt.setAttribute('download', 'file.png');
  elt.style.display = 'none';
  document.body.appendChild(elt);
  elt.click();
  document.body.removeChild(elt);
 };
 img.crossOrigin = 'anonymous';
 img.src = url;
}

2. 单文件下载(iframe)

iframe方式是在页面内隐藏iframe, 然后将下载地址加载到iframe中, 从而触发浏览器的下载?#24418;?/p>

 const iframe = document.createElement('iframe');
 iframe.src = url;
 iframe.style.display = 'none';
 document.body.appendChild(iframe);

但是这里发现,即使是同域的?#35745;参?#27861;完成下载,这是为啥呢?

这里就有个上面的a链接下载没有提到的问题:什么样的链?#30828;?#33021;触发浏览器的下载:

url如何触发浏览器自动下载

一个url能否触发浏览器自动下载,主要看?#20204;?#27714;响应头response header是否,一般是看Content-Disposition和Content-Type这两个消息头:

    response header中指定了Content-Disposition为attachment,它表示让浏览器把消息体以附件的形式下载并保存到本地 (一般还会指定filename, 下载的文件名默认就是filename) response header中指定了Content-Type 为 application/octet-stream(无类型) 或 application/zip(zip包时)等等。(其中 application/octet-stream表示http response为二进制流(没指定明确的type), 用在未知的应用程序文件,浏览器一般不会自动执行或询?#25163;蔥小?#27983;览器会像对待 设置了HTTP头Content-Disposition 值为 attachment 的文件一样来对待这类文件)

只要url上述触发的要求,那么都可以通过iframe的形式来下载

3. 代理服务处理下载

如果后端自己也能控制的话,或者后端能配合的话,可以写一个代理服务,在后端去请求文件数据,然后设置好相应的response header, 然后前端请求代理服务来做下载。

前端(假设代理服务接口是http://exampale.com/download):

 const downloadUrl = 'http://exampale.com/download?url=' + encodeURIComponent(url) + '&name=xxx';
 const elt = document.createElement('a');
 elt.setAttribute('href', downloadUrl);
 elt.setAttribute('download', 'file.png');
 ... 

后端

const url = decodeURIComponent(req.query.url);
http.get(url, (response) => {
 res.setHeader('Content-disposition', 'attachment;filename=' + req.query.name);
 res.setHeader('Content-type', 'application/octet-stream');
 response.pipe(res);
});

单文件的处理先写到这里,多文件的下载下篇在写。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

    无相关信息
最新资讯
康泰纳仕中国声明?#20309;?#21457;现?#24179;?#26377;任何违规?#24418;?></a>
</div>
<div class=

品钛?#20064;?#24180;净利润1.03

中国金融科技解决方案提供?#21776;?#38043;今日发布了截至6月30

面临巨亏和用工法案重压 Uber想借货“运”来盈利?

面临巨亏和用工法案重

Uber不仅在近期面临?#20013;?#20111;损的阴霾,更为窘迫的是,9月10
孙正义失去投资嗅觉了吗?

孙正义失去投资嗅觉了

WeWork正成为孙正义的愿景基金在金融市场上最大的滑铁
中国移动携手华为完成5G话音的全部功能测试

中国移动携手华为完成

近日,中国移动与华为携手在?#26412;?#20449;息港率先完成了基于5G
“本地生活”大战背后 阿里和美团看中的是什么?

“本地生活”大战背后

自2015年双方关系决裂以来,阿里和美团在本地生活上业务
最新文章
Javascript读写cookie的实例源码

Javascript读写cookie

今天小编就为大家分享一篇关于Javascript读写cookie的
微信小程序登录session的使用

微信小程序登录sessio

这篇文章主要介绍了微信小程序登录session的使用,小编
JavaScript中this用法学习笔记

JavaScript中this用法

在本篇文章里小编给大家分享了关于JavaScript中this用
nodejs微信开发之授权登录+获取用户信息

nodejs微信开发之授权

这篇文章主要介绍了nodejs微信开发之授权登录+获取用
nodejs微信开发之自动回复的实现

nodejs微信开发之自动

这篇文章主要介绍了nodejs微信开发之自动回复的实现,文
node微信开发之获取access_token+自定义菜单

node微信开发之获取ac

这篇文章主要介绍了node微信开发之获取access_token+

联系我们 | 网站地图 | 最近更新 | Tags标签云

?CopyRight 2006-2016 Lovean.Com Inc All Rights Reserved.

幸运蛋蛋pc开奖 捕鱼达人下载 94世界杯意大利队服 大平台可以控制时时彩 天津快乐十分一定牛遗漏 吉林快3综合走势图表 快速时时官网 幸运飞艇012路使用方法 福彩15选5走势图表 广西快三开奖走势和值 上海时时查开奖结果