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


Posted in Javascript onDecember 12, 2019

这篇文章主要介绍了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);
  });
}

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

Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
js上传图片预览的实现方法
May 09 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 #Javascript
微信小程序背景音乐开发详解
Dec 12 #Javascript
vue实现商城秒杀倒计时功能
Dec 12 #Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 #Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
You might like
PHP个人网站架设连环讲(一)
2006/10/09 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
简单的js分页脚本
2009/05/21 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
React组件的三种写法总结
2017/01/12 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python实现微信小程序支付功能
2019/07/25 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
浅谈Python协程
2020/06/17 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
业务经理岗位职责
2013/11/11 职场文书
个人合作协议书范本
2014/04/18 职场文书
森林防火标语
2014/06/23 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
社区元宵节活动总结
2015/02/06 职场文书
组织委员竞选稿
2015/11/21 职场文书
Python中requests库的用法详解
2022/06/05 Python