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字符串日期yyyy-MM-dd转化为date示例代码

    js字符串日期yyyy-MM-dd转化为date示例代码

    获取表单中的日期往后台通过json方式传的时候,遇到Date.parse(str)函数在ff下报错,有类似情况的朋友可以参考下本文
    2014-03-03
  • uniapp中常用的几种提示弹框

    uniapp中常用的几种提示弹框

    在前端开发中,为了优化用户的交互体验,常需要用到弹窗来进行提示,引导用户操作,下面这篇文章主要给大家介绍了关于uniapp中常用的几种提示弹框的相关资料,需要的朋友可以参考下
    2022-09-09
  • 浅谈JS for循环中使用break和continue的区别

    浅谈JS for循环中使用break和continue的区别

    这篇文章主要介绍了浅谈for循环中使用break和continue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Nest.js快速启动API项目过程详解

    Nest.js快速启动API项目过程详解

    这篇文章主要为大家介绍了Nest.js快速启动API项目过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JS实现移动端整屏滑动的实例代码

    JS实现移动端整屏滑动的实例代码

    本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果,基本思路是检测手指滑动方向,获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了,具体实现代码大家参考下本文
    2017-11-11
  • TreeView 用法(有代码)(asp.net)

    TreeView 用法(有代码)(asp.net)

    TreeView 用法,后台结合asp.net需要的朋友可以参考下。
    2011-07-07
  • JavaScript中跨标签页通信的常见方式

    JavaScript中跨标签页通信的常见方式

    跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程,这篇文章为大家整理了几个常见的跨标签页通信方式,感兴趣的小伙伴可以了解下
    2023-10-10
  • javascript Deferred和递归次数限制实例

    javascript Deferred和递归次数限制实例

    你知道Deferred和递归次数限制吗?如果还不知道,可以看看下面的实例,很好,适合新手朋友们
    2014-10-10
  • Javascript显示和隐藏ul列表的方法

    Javascript显示和隐藏ul列表的方法

    这篇文章主要介绍了Javascript显示和隐藏ul列表的方法,涉及javascript针对页面元素遍历及显示与隐藏的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 常用js字符串判断方法整理

    常用js字符串判断方法整理

    js常用方法及字符串的常用判断方法都是在工作中经常用到的,在本文整理了一些,感兴趣的朋友可以参考下
    2013-10-10

最新评论