hi,欢迎访问本站!
当前位置: 首页Web前端正文

js实现将指定的内容以文件的形式下载到本地的方法

墨初 Web前端 408阅读

接了一个小需求,需要利用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脚本将网页上或自定义内容转为文件并保存到本的方法,各位可以参考一下。

声明:无特别说明,转载请标明本文来源!
相关推荐