Javascript实现页面内容下载
页面上有一段代码,要保存下来,怎么做?
选择复制?用按钮请求数据库?都很低效。
既然页面已经有了内容,为何不用JS获取这段代码,生成文件后直接下载?
下面我们用Blob和URL.createObjectURL来实现这一功能,兼容Chrome、Firefox和IE等主流浏览器。
1演示
点击查看演示地址。
2实现代码
JS代码如下,已经封装成一个函数,filename是保存的文件名,content是保存到这个文件中的内容:
functiondownload(filename,content){ varblob=newBlob([content],{type:'text/plain'}); varurl=window.URL.createObjectURL(blob); vara=document.createElement('a'); a.style="display:none"; a.href=url; a.download=filename; document.body.appendChild(a); a.click(); setTimeout(function(){ document.body.removeChild(a); window.URL.revokeObjectURL(url); },5); }
这部分点实现步骤是:
- 先创建一个blob类文本对象(Binarylargeobject),用它来虚拟表示一个文件。
- 再用window.URL.createObjectURL 来生成blob对象URL。这个对象URL是一个DOMString,可以用在href和src之类的属性上。
- 创建一个隐藏的<a>标签。
- 设置<a>标签的href 和 download属性。
- 触发这个<a>标签的click事件,实现下载。
- 用setTimeout()延时一小段时间,让click()事件充分响应。
- 延时过后,revokeObjectURL释放由createObjectURL创建的objectURL。当该objectURL不需要的时候,我们要主动调用这个方法,获取最佳性能和内存使用。
3点击下载
然后,我们可以添加一个按钮,点击事件下载文件:
按钮:
<buttontype="button"id="down">Download</button>
点击事件:
document.getElementById('down').onclick=function(){ varfilename="justdown.txt"; varcontent="Hello,youdownloadatextfilebyJavasctipt."; download(filename,content); };
相关文章;Javascript读取文件内容到文本框。
参考资料:
- 如何用JavaScript下载文件
- BlobcreateObjectURLdownloadnotworkinginFirefox(butworkswhendebugging)
- 在浏览器端用JS创建和下载文件