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实现网页键盘控制翻页的方法

    这篇文章主要介绍了Js实现网页键盘控制翻页的方法,较为详细的分析了Js实现网页键盘控制翻页的原理与具体实现方法,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • 基于JavaScript实现图片连播和联级菜单实例代码

    基于JavaScript实现图片连播和联级菜单实例代码

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • PNG背景在不同浏览器下的应用

    PNG背景在不同浏览器下的应用

    论坛中kayeun在我的版面发了一个问题,关于PNG透明背景在FIREFOX浏览器下显示异常。 这里谈一下不同浏览器内,如何应用PNG图片作背景。
    2009-06-06
  • 用javascript实现鼠标框选

    用javascript实现鼠标框选

    用javascript实现鼠标框选...
    2007-05-05
  • 浅谈DOM的操作以及性能优化问题-重绘重排

    浅谈DOM的操作以及性能优化问题-重绘重排

    下面小编就为大家带来一篇浅谈DOM的操作以及性能优化问题-重绘重排。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新。本文图文并茂给大家介绍了js中ajax知识,需要的朋友一起学习吧
    2016-11-11
  • 详解如何在Canvas上实现坐标定位

    详解如何在Canvas上实现坐标定位

    这篇文章我们将来详细的给大家讲解一下如何在 canvas 上实现坐标的定位,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-08-08
  • 微信小程序getLocation 需要在app.json中声明permission字段

    微信小程序getLocation 需要在app.json中声明permission字段

    这篇文章主要介绍了微信小程序getLocation 需要在app.json中声明permission字段,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 微信小程序使用自定义组件导航实现当前页面高亮

    微信小程序使用自定义组件导航实现当前页面高亮

    这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 前端常见问答之flat()和flatMap()有哪些不同

    前端常见问答之flat()和flatMap()有哪些不同

    这篇文章主要介绍了JavaScript中的flat()和flatMap()方法,解释了它们的功能、使用方法和应用场景,flat()用于将嵌套数组压平,而flatMap()则是在压平的同时对每个元素进行转换,需要的朋友可以参考下
    2024-11-11

最新评论