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 相关文章推荐
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
js如何验证密码强度
Mar 18 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
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
第1次亲密接触PHP5(1)
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php session 写入数据库
2016/02/13 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
图片完美缩放
2006/09/07 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
浅析Python 条件控制语句
2020/07/15 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
社会学专业求职信
2014/02/24 职场文书
司法助理专业自荐书
2014/06/13 职场文书
工作目标责任书
2014/07/23 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
中学推普周活动总结
2015/05/07 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL