使用JavaScript强制下载

发布于:2021-01-18 15:27:02

0

84

0

JavaScript 下载

长期以来,强制下载脚本一直是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中删除。调用该函数后,将立即显示浏览器的下载提示。

我期待着更多地了解createObjectURL 和Blob;那两个才是这项技术的真正魔力!

向Sneha Jain大喊,以在Firefox DevTools调试器中实现这项出色的技术!