通过JavaScript下载文件到本地的方法(单文件)

 更新时间:2019年03月17日 14:44:11   作者:小闲  
这篇文章主要介绍了通过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);

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

非同源图片

如果不存在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 将图片转换成 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中, 从而触发浏览器的下载行为

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

但是这里发现,即使是同域的图片,也无法完成下载,这是为啥呢?

这里就有个上面的a链接下载没有提到的问题:什么样的链接才能触发浏览器的下载:

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

一个url能否触发浏览器自动下载,主要看该请求响应头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), 用在未知的应用程序文件,浏览器一般不会自动执行或询问执行。浏览器会像对待 设置了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);
});

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

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

相关文章

  • 深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

    深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

    这篇文章主要介绍了深入理解JavaScript系列(46):代码复用模式(推荐篇)详解,本文讲解了原型继承、复制所有属性进行继承、混合(mix-in)、借用方法等模式,需要的朋友可以参考下
    2015-03-03
  • 基于substring()和substr()的使用以及区别(实例讲解)

    基于substring()和substr()的使用以及区别(实例讲解)

    下面小编就为大家分享一篇基于substring()和substr()的使用以及区别实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • FireFox中textNode分片的问题

    FireFox中textNode分片的问题

    FireFox中textNode分片的问题...
    2007-04-04
  • js实现多张图片每隔一秒切换一张图片

    js实现多张图片每隔一秒切换一张图片

    这篇文章主要为大家详细介绍了js实现多张图片每隔一秒切换一张图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript的查询机制LHS和RHS解析

    JavaScript的查询机制LHS和RHS解析

    这篇文章主要介绍了JavaScript的查询机制LHS和RHS解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript对象解构的用法实例解析

    JavaScript对象解构的用法实例解析

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量,下面这篇文章主要给大家介绍了关于JavaScript对象解构用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 用Javascript获取页面元素的具体位置

    用Javascript获取页面元素的具体位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置,在接下来的文章中为大家介绍下使用js是如何实现的
    2013-12-12
  • JS实现线性表的顺序表示方法示例【经典数据结构】

    JS实现线性表的顺序表示方法示例【经典数据结构】

    这篇文章主要介绍了JS实现线性表的顺序表示方法,简单分析了线性表的原理并结合实例形式给出了线性表的插入与删除实现技巧,需要的朋友可以参考下
    2017-04-04
  • 你必须了解的JavaScript中的属性描述对象详解(上)

    你必须了解的JavaScript中的属性描述对象详解(上)

    JavaScript提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象,需要的可以参考一下
    2022-12-12
  • 微信小程序实现弹出框提交信息

    微信小程序实现弹出框提交信息

    这篇文章主要为大家详细介绍了微信小程序实现弹出框提交信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论