每日一课 | 使用JavaScript强制下载(文末免费领好课)

这篇博客介绍了如何使用JavaScript的Blob和URL.createObjectURL方法在客户端实现强制文件下载,无需服务器介入。通过创建不可见的元素,设置其href为文件内容的Blob表示,并触发点击事件来启动下载。这种方法提供了更好的用户体验,且代码简洁。
摘要由CSDN通过智能技术生成

长期以来,强制下载脚本一直是Internet可用性的重要组成部分。我可以通过在服务器端实现此功能的次数以及我的PHP Force Download帖子的流行程度证明这一点,直到今天。随着网络世界在客户端方面的发展,我开始寻找一种无需服务器即可强制下载的方法,然后在Firefox DevTools Debugger中找到了它。

JavaScript 

执行此操作的函数非常小,并且依赖于URL.createObjectUrl : 

function downloadFile(data, fileName, type="text/plain") {
  // Create an invisible A element
  const a = document.createElement("a");
  a.style.display = "none";
  document.body.appendChild(a);
  // Set the HREF to a Blob representation of the data to be downloaded
  a.href = window.URL.createObjectURL(
    new Blob([data], { type })
  );
  // Use download attribute to set set desired file name
  a.setAttribute("download", fileName); 
  // Trigger the download by simulating click
  a.click();
  // Cleanup
  window.URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
}

该函数将<a>元素注入到正文中,将其URL设置为目标文件的文本内容的Blob值,然后单击该元素以触发下载。该元素在此过程中保持隐藏状态,并在click()调用后立即从DOM中删除。调用该函数后,将立即显示浏览器的下载提示。

我期待学习有关createObjectURLBlob更多信息;那两个才是这项技术的真正魔力!

翻译自: https://davidwalsh.name/javascript-download

今日福利????
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值