JavaScrip如果基于url实现图片下载


Posted in Javascript onJuly 03, 2020

1.H5 download属性

function downFile(content, filename) {
  // 创建隐藏的可下载链接
  var eleLink = document.createElement('a');
  eleLink.download = filename;
  eleLink.style.display = 'none';
  // 字符内容转变成blob地址
  var blob = new Blob([content]);
  eleLink.href = URL.createObjectURL(blob);
  // 触发点击
  document.body.appendChild(eleLink);
  eleLink.click();
  // 然后移除
  document.body.removeChild(eleLink);
};

downFile(下载地址, 保存名称);

2.iframe方式

// if (typeof(download.iframe) == 'undefined') {
      //   var iframe = document.createElement('iframe');
      //   download.iframe = iframe;
      //   document.body.appendChild(download.iframe);
      // };
      // download.iframe.src = newdownloadUrl;
      // download.iframe.style.display = "none";

3.form方式

// var $eleForm = $("<form method='get'></form>");
      // $eleForm.attr("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");
      // $eleForm.attr("action", url);
      // $(document.body).append($eleForm);
      // $eleForm.submit();

downloadIamge(imgsrc, name) {//下载图片地址和图片名
 let image = new Image();
 // 解决跨域 Canvas 污染问题
 image.setAttribute("crossOrigin", "anonymous");
 image.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  let context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  let a = document.createElement("a"); // 生成一个a元素
  let event = new MouseEvent("click"); // 创建一个单击事件
  a.download = name || "photo"; // 设置图片名称
  a.href = url; // 将生成的URL设置为a.href属性
  a.dispatchEvent(event); // 触发a的单击事件
 };
 image.src = imgsrc;
},

原理

我们先看看 download 的使用方法:

<a href="http://somehost/somefile.zip" rel="external nofollow" rel="external nofollow" download="filename.zip">Download file</a>

看看上面的代码,只要为 <a> 标签添加 download 属性,我们点击这个链接的时候就会自动下载文件了~

顺便说下,download 的属性值是可选的,它用来指定下载文件的文件名。像上面的例子中,我们下载到本地的文件名就会是 filename.zip 拉,如果不指定的话,它就会是 somefile.zip 这个名字拉!

看到这里,你可能会说,坑爹啊,这明明是用 HTML 5 的新特性来实现下载文件嘛,说好的用 JavaScript 下载文件呢?

事实上,用 JavaScript 来下载文件也是利用这一特性来实现的,我们的 JavaScript 代码不外乎就是:

  • 用 JavaScript 创建一个隐藏的 <a> 标签
  • 设置它的 href 属性
  • 设置它的 download 属性
  • 用 JavaScript 来触发这个它的 click 事件

翻译成 JavaScript 代码就是:

var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'what-you-want.txt';
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);

好拉,是不是看到有个陌生的东东呢?

window.URL

window.URL 里面有两个方法:

createObjectURL 用 blob 对象来创建一个 object URL(它是一个 DOMString),我们可以用这个 object URL 来表示某个 blob 对象,这个 object URL 可以用在 href 和 src 之类的属性上。

revokeObjectURL 释放由 createObjectURL 创建的 object URL,当该 object URL 不需要的时候,我们要主动调用这个方法来获取最佳性能和内存使用。

知道了这两个方法之后,我们再回去看看上面的例子就很容易理解了吧!只是用 blob 对象来创建一条 URL,然后让 <a> 标签引用该 URL,然后触发个点击事件,就可以下载文件了!

那么问题来了,blob 对象哪里来?

Blob 对象

Blob 全称是 Binary large object,它表示一个类文件对象,可以用它来表示一个文件。根据 MDN 上面的说法,File API 也是基于 blob 来实现的。

由于本文的主题是讲 JavaScript 下载文件,那我们构建 blob 的方式就是通过服务器返回的文件来创建 blob 拉!
而最简单的方式就是用 fetch API 了,我们可以整合上面的例子:

fetch('http://somehost/somefile.zip').then(res => res.blob().then(blob => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'myfile.zip';
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}))

很简单对吧!

你可能会问,何必这么麻烦呢?直接写成下面这样不就好了:

<a href="http://somehost/somefile.zip" rel="external nofollow" rel="external nofollow" download="myfile.zip">Download file</a>
嗯,对于这种写法,我只能说,你做的太正确了!如果你要下载的是已经存在服务器上面的静态文件的话,那么写成这样是最方便的。浏览器会帮你处理整个下载过程,不需要你干涉。如果你用 blob 的方式来下载文件的话,会有下面这些限制的:

限制一:不同浏览器对 blob 对象有不同的限制

具体看看下面这个表格(出自 FileSaver.js):

Browser Constructs as Filenames Max Blob Size Dependencies
Firefox 20+ Blob Yes 800 MiB None
Firefox data: URI No n/a Blob.js
Chrome Blob Yes 500 MiB None
Chrome for Android Blob Yes 500 MiB None
Edge Blob Yes ? None
IE 10+ Blob Yes 600 MiB None
Opera 15+ Blob Yes 500 MiB None
Opera data: URI No n/a Blob.js
Safari 6.1+* Blob No ? None
Safari data: URI No n/a Blob.js

限制二:构建完 blob 对象后才会转换成文件

这一点限制对小文件(几十kb)可能没什么影响,但对稍微大一点的文件影响就很大了。试想,用户要下载一个 100mb 的文件,如

果他点击了下载按钮之后没看到下载提示的话,他肯定会继续按,等他按了几次之后还没看到下载提示时,他就会抱怨我们的网站,然后离开了。

然而事实上下载的的确确发生了,只是要等到下载完文件之后才能构建 blob 对象,再转化成文件。而且,用户再触发多几次下载就会造成一些资源上的浪费。

因此,如果是要下载大文件的话,还是推荐直接创建一个 <a> 标签拉~

写 html 也好,写 JavaScript 动态创建也好,用自己喜欢的方式去创建就好了。

为什么要用 JavaScript 下载文件

好拉,说了半天,其实我们一直说的都是:「不要用 JavaScript 下载文件拉,限制多多,又不好用,直接用 html 就好拉,简单方便又快捷」这个论调。

事实上也确实如此,但有些时候我们确实需要通过 JavaScript 来做一些预处理。

权限校验

有些时候,我们需要对下载做一些限制,最常见的就是权限校验了,如检查该用户是否有下载的权限,是否有高速下载的权限等等。这时候,我们可以利用 JavaScript 做一些预处理。如:

fetch('http://somehost/check-permission', options).then(res => {
if (res.code === 0) {
var a = document.createElement('a');
var url = res.data.url;
var filename = 'myfile.zip';
a.href = url;
a.download = filename;
a.click();
} else {
alert('You have no permission to download the file!');
}
});

在这个例子里面,我们没有用 blob 来构建 URL,而是通过后端服务器来计算出用户的下载链接,然后再利用之前提到的动态创建 <a> 标签的方式来实现下载,很简单吧!

动态文件

动态生成文件然后返回给客户端也是一个很常见的需求,譬如我们有时候需要做导出数据的功能,把数据库中的某些数据导出到 Excel 中,然后再返回客户端。

这时候我们就不能简单的指定 href 属性,因为对应的 URL 并不存在。

我们只能通过 JavaScript 对服务器发出一个请求,通知它去生成某个文件,然后把对应的 URL 返回给客户端。

有没有感觉这个过程和上面「权限校验」一节很像?肯定拉,因为我们只是对 URL 做了一些预处理而已嘛~

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

Javascript 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
jQuery实现增删改查
Dec 22 jQuery
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 #Javascript
JavaScript如何判断对象有某属性
Jul 03 #Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 #Javascript
Vue使用预渲染代替SSR的方法
Jul 02 #Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
You might like
深入解析php模板技术原理【一】
2008/01/10 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
wxPython中文教程入门实例
2014/06/09 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python time.strptime格式化实例详解
2021/02/03 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
拓展训练激励口号
2014/06/17 职场文书
垃圾桶标语
2014/06/24 职场文书
合作协议书范文
2014/08/20 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
安全主题班会教案
2015/08/12 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server