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

2023-05-31 墨初 Web前端 913阅读

接了一个小需求，需要利用js脚本将网页中的内容或自定义的内容以文件的形式下载到本地。所有的逻辑在前台完成不需要后台的支持。下面的博文就详细的说一下。

js将内容以文件的形式下载到本地

js中的Blob对象，可以将一些数据转成类似文件对象的原始数据，通俗来说就是生成一个文件用于下载。

实现代码：

JavaScript

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

完整的代码

下面是个完整的代码，各位可以复制本地进行测试。

Markup

<!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脚本将网页上或自定义内容转为文件并保存到本的方法，各位可以参考一下。

手机预览赞赏支持

"作者已被打赏56次"

标签：JS教程 JavaScript JS