javascript 如何实现指定的肉容以文件的形式保存到本地的方法

纽扣扣错了可以重扣,但人生不行,除非你选对了人生道路。早上起床你一句早安,晚上睡觉一句晚安。对我来说这就是极有意义的一天。

最近的项目中有一项功能是利用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>

本文javascript 如何实现指定的肉容以文件的形式保存到本地的方法到此结束。不论你的生活如何卑微,你要应对它生活,不要躲避它,更别用恶言咒骂它。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法