JS通过URL下载文件并重命名两种方式代码

 更新时间:2023年11月01日 12:01:25   作者:訾博ZiBo  
前端下载文件方法很多,url是文件地址,下面这篇文章主要给大家介绍了关于JS通过URL下载文件并重命名的两种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、a 标签简单设置 href 方式

// 下载文件
function downloadFile() {
  const link = document.createElement('a');
  link.style.display = 'none';
  // 设置下载地址
  link.setAttribute('href', file.sourceUrl);
  // 设置文件名
  link.setAttribute('download', file.fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

二、a 标签使用 blob 数据类型方式

async function download(downloadUrl: string, downloadFileName: string ) {
  const blob = await getBlob(downloadUrl);
  saveAs(blob, downloadFileName );
}

function getBlob(url: string) {
  return new Promise<Blob>((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Request failed'));
    };

    xhr.send();
  });
}

function saveAs(blob: Blob, filename: string) {
  const link = document.createElement('a');
  const body = document.body;

  link.href = window.URL.createObjectURL(blob);
  link.download = filename;

  // hide the link
  link.style.display = 'none';
  body.appendChild(link);

  link.click();
  body.removeChild(link);

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

附:通过blob实现跨域下载并修改文件名

点击时调用如下方法

function  load(file) {
  this.getBlob(file.url).then(blob => {
    this.saveAs(blob, file.name);
  });
},

//通过文件下载url拿到对应的blob对象

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();
  });
},
//下载文件
saveAs(blob, filename) {
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

总结 

到此这篇关于JS通过URL下载文件并重命名两种方式的文章就介绍到这了,更多相关JS URL下载文件并重命名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通过实例了解JS 连续赋值

    通过实例了解JS 连续赋值

    这篇文章主要介绍了通过实例了解JS 连续赋值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript实现网页版贪吃蛇游戏

    JavaScript实现网页版贪吃蛇游戏

    这篇文章主要为大家详细介绍了JavaScript实现网页版贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript模板入门介绍

    JavaScript模板入门介绍

    我最开始写过一个富交互的页面,其中的JavaScript代码包含了很多html标签
    2012-09-09
  • JavaScript运动框架 解决防抖动问题、悬浮对联(二)

    JavaScript运动框架 解决防抖动问题、悬浮对联(二)

    这篇文章主要为大家详细介绍了JavaScript运动框架的第二部分,解决防抖动问题、悬浮对联问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Webpack的Loader和Plugin的区别

    Webpack的Loader和Plugin的区别

    这篇文章主要介绍了Webpack的Loader和Plugin的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 详解JavaScript对象和数组

    详解JavaScript对象和数组

    这篇文章主要介绍了JavaScript对象和数组,需要的朋友可以参考下
    2015-12-12
  • eclipse如何忽略js文件报错(附图)

    eclipse如何忽略js文件报错(附图)

    eclipse中js文件报错的情况,或许大家早已习以为常了,那么有什么好的方法可以将其忽略掉呢?如果你也在寻找此问题,那么本文或许可以帮助到你
    2013-10-10
  • ES6字符串的扩展实例

    ES6字符串的扩展实例

    这篇文章主要介绍了ES6字符串的扩展实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • javascript实现支持移动设备画廊

    javascript实现支持移动设备画廊

    本文通过纯javascript技术实现支持移动设备画廊,支持移动设备手势操作,感兴趣的朋友一起来学习吧
    2015-08-08
  • javascript Array对象基础知识小结

    javascript Array对象基础知识小结

    感觉自己对Array对象总是有种朦胧的感觉,今天自己手写总结,加深一下印象。
    2010-11-11

最新评论