最近的项目中有一项功能是利用JS脚本,将网页上指定的内容以文件的形式下载到本地,写了一个不错的案例,下面分享一下。

JS将指定的内容保存到本地的方法

JS想要实现指定内容存到本地的这个功能,需要用到 js 中的 Blob 对象,至于 Blob 对的详解,大家可以在网上自行搜索一下,这篇文章不再详解!

js 实现代码:

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);

完整的示例代码:

下面的示例展示了,js将DIV里的内容以按钮触发的形式,写入到文件,并下载到本地的过程!

<!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">我是要写入到文件的内容——飞鸟慕鱼博客(http://feiniaomy.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>