前端 javascript 实现文件下载的示例


Posted in Javascript onNovember 24, 2020

在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接。示例:

<a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a>

1. 前端 js 下载实现与示例

通过 javascript 动态创建一个包含 download 属性的 a 元素,再触发点击事件,即可实现前端下载。

代码示例:

function download(href, title) {
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', title);
    a.click();
}

说明:

  • href 属性设置要下载的文件地址。这个地址支持多种方式的格式,因此可以实现丰富的下载方法。
  • download 属性设置了下载文件的名称。但 href 属性为普通链接并且跨域时,该属性值设置多数情况下会被浏览器忽略。

1.1 普通连接下载示例

// 下载图片
download('https://lzw.me/images/gravatar.gif', 'lzwme-gravatar');
// 下载一个连接
download('https://lzw.me', 'lzwme-index.html');

1.2 href 为 data URIs 示例
data URI 是前缀为 data:scheme 的 URL,允许内容创建者在文档中嵌入小文件。数据URI由四个部分组成:前缀(数据:),指示数据类型的MIME类型,如果非文本则为可选的base64令牌,数据本身:

data:[<mediatype>][;base64],<data>

链接的 href 属性为 data URIs 时,也可以实现文件内容的下载。示例:

download('data:,Hello%2C%20World!', 'data-uris.txt');
download('data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D', 'data-uris.txt');

1.3 canvas 下载示例
对于 canvas 可以通过 toDataURL 方法取得 data URIs 格式的内容。

1.4 二进制内容下载
URL.createObjectURL 方法会根据传入的参数创建一个指向该参数对象的 URL。新的对象 URL 指向执行的 File 对象或者是 Blob 对象。

URL.createObjectURL 的参数是 File 对象或者 Blob 对象,File 对象也就是通过 input[type=file] 选择的文件,Blob 对象是二进制数据。

将URL.createObjectURL 返回值设为 href 属性的值,即可实现二进制内容下载。示例:

const content = 'Welcome to lzw.me!';
const blob = new Blob([content]);
const href = URL.createObjectURL(blob);
download(href, 'download-text.txt');
URL.revokeObjectURL(href);

1.5 前端下载方法示例
综合上述讨论,这里给出一个前端实现下载的 saveAs 方法的 TypeScript 示例:

/**
 * 通过创建 a dom 对象方式实现前端文件下载
 * @param href 要下载的内容链接。当定义了 toBlob 时,可以为纯文本或二进制数据(取决于 toBlob 格式
 * @param fileName 下载后的文件名称
 * @param toBlob 如设置该参数,则通过 blob 方式将 href 转换为要保存的文件内容,该参数将入参为 new Blob([href], toBlob) 的第二个参数
 * @example
 * ```js
 * saveAs('abc', 'abc.txt', {});
 * saveAs('data:,Hello%2C%20World!', 'hello.txt');
 * saveAs('https://lzw.me/images/avatar/lzwme-80x80.png', 'lzwme-logo.png');
 * ```
 */
export function saveAs(href: string | Blob, fileName?: string, toBlob?: PlainObject) {
 const isBlob = href instanceof Blob || toBlob;
 if (!fileName && typeof href === 'string' && href.startsWith('http')) {
  fileName = href.slice(href.lastIndexOf('/') + 1);
 }
 fileName = decodeURIComponent(fileName || 'download');
 if (typeof href === 'string' && toBlob) href = new Blob([href], toBlob);
 if (href instanceof Blob) href = URL.createObjectURL(href);
 const aLink = document.createElement('a');
 aLink.setAttribute('href', href);
 aLink.setAttribute('download', fileName);
 aLink.click();
 // const evt = document.createEvent("HTMLEvents");
 // evt.initEvent("click", false, false);
 // aLink.dispatchEvent(evt);
 if (isBlob) setTimeout(() => URL.revokeObjectURL(aLink.href), 100);
 return aLink;
}

2.检测浏览器是否支持 download 属性

download 属性为 html5 新增内容,浏览器支持情况可参考:http://caniuse.com/#feat=download

<img src="https://lzw.me/wp-content/uploads/2017/04/a-download.png" alt="" width="879" height="346" class="aligncenter size-full wp-image-2330" />

判断浏览器是否支持该属性,只需要检测 a 标签是否存在 download 属性。示例:

const downloadAble = 'download' in document.createElement('a');

对于不支持的浏览器,只能另想他法或者予以降级处理了。

3.使用 serviceWorker 和 fetch API 代理实现

前端下载更多的需求是因为内容产生于前端。那么可以在后端实现一个这样的 API ,它在接收到前端发出的内容后返回下载格式的数据。这种实现就不存在浏览器兼容问题。

利用 serviceWorker 和 fetch API 截拦浏览器请求,只需实现好约定逻辑,也可实现这种功能需求。示例:

在页面中,通过 fetch API 构造请求:

fetch('lzwme.txt', {
    isDownload: true,
    body: {
        data: new Blob('hi!')
    }
})

在 serviceWorker 中,截拦附带 isDownload 头信息的请求,构造下载回应:

self.addEventListener('fetch', function(event) {
    const req = event.request;
    if (!req.headers.get('isDownload')) {
        retrun fetch(req);
    }
    const filename = encodeURIComponent(req.url);
    const contentType = req.headers.get('Content-Type') || 'application/force-download';
    const disposition = "inline;filename=" + filename + ";filename*=utf-8''" + filename
    const myBody = req.headers.get(body).data;
    event.respondWith(
        new Response(myBody, {
            headers: {
                'Content-Type': contentType,
                'Content-Disposition': disposition
            }
        })
    );
});

4 使用 ajax (xhr与fetch API) 方式下载服务器文件

以上主要讨论的是纯前端实现下载保存文件的方法。对于下载服务器文件,最简的方式就是 window.open(url) 和 location.href=url 了,但是其的弊端也很明显,当出错时整个页面都会挂掉,而且也无法获得下载状态与进度,下载时间稍长时体验相当不好。

下面介绍一下使用 xhr 和 fetch API 实现文件下载的方法。其主要思路为:将请求结果设为 Blob 类型,然后采用前端下载保存 Blob 类型数据的方式实现下载。

4.1 使用 xhr 下载远程服务器文件
代码示例:

/** 前端下载/保存文件 */
function saveAs(href, fileName) {
  const isBlob = href instanceof Blob;
  const aLink = document.createElement('a');
  aLink.href = isBlob ? window.URL.createObjectURL(href) : href;
  aLink.download = fileName;
  aLink.click();
  if (isBlob) setTimeout(() => URL.revokeObjectURL(aLink.href), 100);
}
function xhrDownload(url, options = {}) {
  options = Object.assign({ method: 'get', headers: {} }, options);
  return new Promise((reslove, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob'; // options.responseType;
    if (options.headers) {
      for (const key in options.headers) xhr.setRequestHeader(key, options.headers[key]);
    }
    xhr.onload = () => {
      // 从 Content-Disposition 中获取文件名示例
      const cd = xhr.getResponseHeader('Content-Disposition');
      if (cd && cd.includes('fileName') && !options.fileName) options.fileName = cd.split('fileName=')[1];
      options.fileName = decodeURIComponent(options.fileName || 'download-file');
      if (+xhr.status == 200) {
        saveAs(xhr.response, options.fileName);
        reslove(options.fileName);

使用 fecth API 下载远程服务器文件

function fetchDownload(url, options = {}) {
  options = Object.assign({ credentials: 'include', method: 'get', headers: {} }, options);
  return fetch(url, options).then(response => {
    return response.blob().then(blob => {
      if (!blob || !blob.size) return Promise.reject('empty');
      // 从 Content-Disposition 中获取文件名示例
      const cd = response.headers.get('Content-Disposition');
      if (cd && cd.includes('fileName') && !options.fileName) options.fileName = cd.split('fileName=')[1];
      options.fileName = decodeURIComponent(options.fileName || 'download-file');
      saveAs(blob, options.fileName);
      return options.fileName;
    });
  });
}
// 测试
fetchDownload('https://lzw.me/images/avatar/lzwme-80x80.png', {
    // method: 'post',
    // headers: {
    //   'Content-Type': 'application/json'
    // },
    // body: JSON.stringify({
    //   pageSize: 100000,
    //   startPage: 0
    // })
  })

以上就是前端 javascript 实现文件下载的示例的详细内容,更多关于JavaScript 文件下载的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript中的16进制字符(改进)
Nov 21 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
js闭包实例汇总
Nov 09 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 #Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Js利用正则表达式去除字符串的中括号
Nov 23 #Javascript
jQuery实现动态操作table行
Nov 23 #jQuery
You might like
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
[原创]图片分页查看
2006/08/28 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Windows下python3.7安装教程
2018/07/31 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python名片管理系统开发
2020/06/18 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
网上书店创业计划书
2014/01/12 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
就业协议书样本
2014/08/20 职场文书
运动会演讲稿200字
2014/08/25 职场文书
民事调解书范文
2015/05/20 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
公司年会主持词范文!
2019/05/07 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS