js实现将指定的内容以文件的形式下载到本地的方法
墨初 Web前端 733阅读
接了一个小需求，需要利用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脚本将网页上或自定义内容转为文件并保存到本的方法，各位可以参考一下。