js实现将指定的内容以文件的形式下载到本地的方法
墨初 Web前端 661阅读
接了一个小需求,需要利用js脚本将网页中的内容或自定义的内容以文件的形式下载到本地。所有的逻辑在前台完成不需要后台的支持。下面的博文就详细的说一下。
js将内容以文件的形式下载到本地
js中的Blob对象,可以将一些数据转成类似文件对象的原始数据,通俗来说就是生成一个文件用于下载。
实现代码:
var urlObject = window.URL || window.webkitURL || window; var downloadData = new Blob(['这里是下载文件的内容!']); // js Blob 方法 var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") save_link.href = urlObject.createObjectURL(downloadData); save_link.download = '这里是下载文件的文件名'; var ev = document.createEvent("MouseEvents"); ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(ev);
完整的代码
下面是个完整的代码,各位可以复制本地进行测试。
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <div id="mochu">我是要写入到文件的内容——73so博客(http://73so.com)</div> <button>保存到本地</button> <script> $('button').on('click',function(){ var urlObject = window.URL || window.webkitURL || window; var downloadData = new Blob([$('#mochu').text()]); // js Blob 方法 var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") save_link.href = urlObject.createObjectURL(downloadData); save_link.download = 'feiniaomy.txt'; var ev = document.createEvent("MouseEvents"); ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(ev); }) </script> </body> </html>
以上就是利用js脚本将网页上或自定义内容转为文件并保存到本的方法,各位可以参考一下。