使用 JavaScript 下载文件

使用 JavaScript 下载文件使用JavaScript下载文件

大家好,又见面了,我是你们的朋友全栈君。

1 最简单的方法

<a href="http://somehost/somefile.zip" download="filename.zip"> Download file </a>

只要为<a>标签添加 download 属性,我们点击这个链接的时候就会自动下载文件了
其中, download 属性可选(IE 不支持此属性),意思是指定下载后的文件名称
这是最简单、最方便的前端下载文件手段,如果条件允许应该作为第一个选择。

2 使用JavaScript

// 将获取的sonmefile.zip转换成 blob对象
fetch('http://somehost/somefile.zip').then(res =>             res.blob().then(blob => {
    var a = document.createElement('a');
    // 用 blob 对象来创建一个 object URL
    var url = window.URL.createObjectURL(blob);
    var filename = 'what-you-want.txt';
    a.href = url;
    a.download = filename;
    a.click();
    // 使用完object URL 之后手动撤销以释放掉内存优化性能
    window.URL.revokeObjectURL(url);
}))

对于blob 对象,支持的浏览器版本为IE10+, 并且当转换的文件较大时,可能会发生延迟。

但如果需要在下载之前做一些预处理的动作,例如检查该用户是否有下载的权限,是否有高速下载的权限、或者动态文件链接等等,这是一个很好的方法。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139741.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • webpack基础打包命令_webpack打包原理

    webpack基础打包命令_webpack打包原理没有配置文件的打包如果我们没有使用配置文件webpack.config.js,那么我们就需要通过命令来打包案例我们首先创建一个webpackTest文件夹,然后在文件夹中再创建2个子文件夹dis

  • perl正则表达式练习[通俗易懂]

    perl正则表达式练习[通俗易懂]perl正则表达式初级练习网站:https://regexone.com/

  • html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」

    html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」插件的特色:封装强悍、例子充足(基本都验证类型都被囊括)、调用轻便注意事项:1.演示版本为v2.2.4;2.v2.0以下的版本参数并不完全通用;对validationEngine.jquery.css文件进行修改,修改如下:1.提示内容字体改为宋体;2.去除中各浏览器的私有属性(各浏览器已经支持圆角和阴影,不再需要加私有属性)。对jquery.validationEngine.js文件…

  • 说一下CAS锁机制?「建议收藏」

    1.CAS(CompareandSwap比较并交换),是一种无锁算法,当多个线程尝试使用CAS同时更新同一个变量时,只有其中一个线程能更新变量的值,而其他线程都失败,失败的线程并不会挂起,而是被告知这次竞争中失败,并可以再次尝试。2.CAS算法涉及到三个操作数a.需要读写的内存位置(V)b.进行比较的预期原值(A)c.拟写入的新值(B)3.如果内存位置V的值与预期原值A相匹配,那么处理器会自动将该位置值更新为新值B,否则处理器不做任何操作。java多线程总结篇4——锁机制…

  • centos 7 启动与切换图形界面

    centos 7 启动与切换图形界面安装图形界面默认情况下是不会安装图形界面的,所以需要自己手动安装,步骤如下:开启系统,以root身份进入安装X(XWindowSystem),命令如下: yumgroupinstall"XWindowSystem"其中大约有200多个软件,安装完成会出现complete!字样。然后安装图形界面软件,GNOME(GNOMEDesktop),命令如下: yumg…

  • linux(9)find命令详解「建议收藏」

    linux(9)find命令详解「建议收藏」find命令格式:findpath-option[-print][-exec-okcommand]{}\;find命令的参数:path:要查找的目录路径。~表示$HO

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号