学习
实践
活动
工具
TVP
写文章
专栏首页西安-晁州纯js实现文件下载并重命名功能

纯js实现文件下载并重命名功能

直接记录代码:

/**
 * 获取 blob
 * @param  {String} url 目标文件地址
 * @return {cb} 
 */
function getBlob(url,cb) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
        };
        xhr.send();
}

/**
 * 保存
 * @param  {Blob} blob     
 * @param  {String} filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
    } else {
            var link = document.createElement('a');
            var 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, function(blob) {
        saveAs(blob, filename);
    });
};
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.cnblogs.com/vipzhou复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。

    URL文件地址下载方法 一、正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性

    前端江太公
  • python实现遍历文件夹图片并重命名

    在做深度学习相关项目时,需要标注图片,筛选过后图片名字带有括号,显得比较乱,因此利用python进行统一规范重命名操作

    砸漏
  • js实现下载功能

    直接点击可以下载,需要注意的是download属性,当不加download属性时,如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式,那么不会下...

    用户1349575
  • django 实现文件下载功能

    在实际的项目中很多时候需要用到下载功能,如导excel、pdf或者文件下载,当然你可以使用web服务自己搭建可以用于下载的资源服务器,如nginx,这里我们主要...

    py3study
  • CEF 文件下载功能实现

    CEF 下载功能非常容易拓展,它提供了丰富的接口和控制功能,比如对正在下载的文件实现暂停、继续、取消等操作。并且 CEF 还帮我们默认实现了一个另存为的对话框,...

    我与梦想有个约会
  • android实现文件下载功能

    – 创建一个HttpURLConnection对象 : HttpURLConnection urlConn = (HttpURLConnection) url....

    砸漏
  • DownloadManager实现文件下载功能

    关于文件下载,或许不是一个多么陌生的内容,在网络操作中下载只是其中一个方面,但是关于文件下载还是有不少东西要说,今天我就拿下载的方式来说吧。

    砸漏
  • servlet实现文件下载功能

    第一步:首先在你的项目新建一个文件夹存放一些可以下载的文件(本教程一一张图片为例子) ? ---- 第二步:写servlet(DownloadServlet....

    Java学习
  • Android WebView实现文件下载功能

    WebView控制调用相应的WEB页面进行展示。当碰到页面有下载链接的时候,点击上去是一点反应都没有的。原来是因为WebView默认没有开启文件下载的功能,如果...

    砸漏
  • JS - 原生js实现 网页截图(+下载截图) 功能

    xing.org1^
  • Java Web文件下载功能实现

    但是这里会出现一个问题,就是单击下载压缩包的时候会弹出下载页面,但是下载图片的时候浏览器就直接打开了图片,没有下载。

    Java团长
  • js通过点击实现文件下载

    一般情况下通过a标签可以实现下载效果,比如一般的文件类的,但是如果是图片则大部分的浏览器都会跳转的一个页面进行显示图片,而不是下载。下面我们来介绍一个通用的文件...

    OECOM
  • JS - 原生js实现 网页截图(+下载截图) 功能

    xing.org1^
  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考,具体如下:

    砸漏
  • js实现使用文件流下载csv文件

    在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了。现在我们开始来理解下B...

    IT工作者
  • Android使用WebView实现文件下载功能

    本文实例为大家分享了WebView实现文件下载功能的具体代码,供大家参考,具体内容如下

    砸漏
  • js使用文件流下载csv文件的实现方法

    在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了。

    美团骑手
  • Android使用Handler实现下载文件功能

    本文实例为大家分享了Android实现下载文件的具体代码,供大家参考,具体内容如下

    砸漏

扫码关注腾讯云开发者

领取腾讯云代金券