幸运蛋蛋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);
});

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

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

    无相关信息
最新资讯
阿里成立新公司 打包YUNOS资产将注入重组后斑马

阿里成立新公司 打包Y

该公司注册资本为1000万元人民币,法定代表人为菜鸟ET实
与董事会存?#21046;?Expedia集团CEO与CFO离职

与董事会存?#21046;?Exped

全球在线旅游巨头Expedia集团宣布,Expedia首席执行官(CE
欧盟达成强硬立场:不解决风险不允许数?#21482;?#24065;进入

欧盟达成强硬立场:不解

欧盟各国财长今日达成一致,在明?#26041;?#20915;可能带来的风险之
?#20998;?#31185;学院院士:区块链监管应由区块链本身完成

?#20998;?#31185;学院院士:区块链

比尔?罗斯科强调,规则应成为区块链运作的本质特征之一
调查:中国消费者对电动汽车的热情远高于欧美

调查:中国消费者对电动

咨询服务公司OC&C Strategy Consulting今日公布的一项
360:拟非公开发行13.5亿股股票募资不超过108亿元

360:拟非公开发行13.5

三六零发布公告称,拟非公开发行不超过13.5亿股,?#25216;式?
最新文章
微信小程序调用天气接口并且渲染在页面过程详解

微信小程序调用天气接

这篇文章主要介绍了微信小程序调用天气接口并且渲染在
Electron + vue 打包桌面操作流程详解

Electron + vue 打包

这篇文章主要介绍了Electron + vue 打包桌面操作流程,
前端Vue项目详解--初始化及导航栏

前端Vue项目详解--初

这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,
ES6 Object方法扩展的应用实例分析

ES6 Object方法扩展的

这篇文章主要介绍了ES6 Object方法扩展的应用,结合实
JS实现给数组对象排序的方法分析

JS实现给数组对象排序

这篇文章主要介绍了JS实现给数组对象排序的方法,结合
基于vue+axios+lrz.js微信端?#35745;?#21387;缩上传方法

基于vue+axios+lrz.js

这篇文章主要介绍了基于vue+axios+lrz.js微信端?#35745;?#21387;
幸运蛋蛋pc开奖 白小姐玄机图片彩图 广东11选5乐彩 麦久彩票群 黑龙江快乐十分前三值 黑龙江快乐十分麻将盘 北京赛车pk10微信群 泳坛夺金481走势图 快乐时时彩开奖号码 新疆25选7开奖2018年 3d试机号落号分布图