JavaScript实现文件下载并重命名代码实例

 更新时间:2019年12月12日 10:36:27   作者:吾知的善良  
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

第一种是HTML官网中的方法

<a href="/images/liang.jpg" rel="external nofollow" download="文件名称">

HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称

这种同源访问是没有问题的,但一跨域就不行了,试了其它方法,不是报跨域错误,就是在当前页面打开文件,体验相当不好。

第二种方案比较通用

/**
 * 获取 blob
 * url 目标文件地址
 */
function getBlob(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };

    xhr.send();
  });
}

/**
 * 保存 blob   
 * filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement('a');
    const body = document.querySelector('body');
   
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = 'none';
    body.appendChild(link);
    
    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}

/**
 * 下载
 * @param {String} url 目标文件地址
 * @param {String} filename 想要保存的文件名称
 */
function download(url, filename) {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

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

相关文章

  • 纯js实现的论坛常用的运行代码的效果

    纯js实现的论坛常用的运行代码的效果

    bluidea论坛的脚本板块的版主写的,不错,转到这!
    2008-07-07
  • JS模拟超市简易收银台小程序代码解析

    JS模拟超市简易收银台小程序代码解析

    本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-08-08
  • BootStrap智能表单实战系列(七)验证的支持

    BootStrap智能表单实战系列(七)验证的支持

    这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题,本文介绍非常详细,具有参考价值,需要的朋友可以参考下
    2016-06-06
  • 使用JavaScript 定义自己的ajax函数

    使用JavaScript 定义自己的ajax函数

    这篇文章主要为大家介绍了JavaScript定义ajax函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • JavaScript自定义日历实现签到功能

    JavaScript自定义日历实现签到功能

    这篇文章主要为大家详细介绍了JavaScript自定义日历实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript体验异步更好的解决办法

    JavaScript体验异步更好的解决办法

    本篇文章主要给大家讲述了JavaScript体验异步更好的解决办法,有这方面需要的朋友跟着学习参考下吧。
    2018-01-01
  • 原生JavaScript之es6中Class的用法分析

    原生JavaScript之es6中Class的用法分析

    这篇文章主要介绍了原生JavaScript之es6中Class的用法,结合实例形式对比分析了es6与es5相关class定义、区别及使用技巧,需要的朋友可以参考下
    2020-02-02
  • javascript中使用class和prototype的区别小结

    javascript中使用class和prototype的区别小结

    本文将介绍在JavaScript何时使用class以及何时使用prototype,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • Js图片点击切换轮播实现代码

    Js图片点击切换轮播实现代码

    这篇文章主要介绍了Js图片点击切换轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • uniapp实现滑动评分效果

    uniapp实现滑动评分效果

    这篇文章主要为大家详细介绍了uniapp实现滑动评分效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论