js生成任意文件并下载

最新推荐文章于 2025-07-10 09:31:49 发布

置顶桃子Jerry

最新推荐文章于 2025-07-10 09:31:49 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 前端文章标签： html javascript html5

本文链接：https://blog.youkuaiyun.com/jerryJJYY/article/details/99306536

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了一种在前端实现文件下载的方法，特别是如何下载JSON文件。通过创建a标签并利用Blob对象，可以实现在现代浏览器中直接下载由JSON数据生成的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在项目中经常会遇到下载文件的需求，在网上找了各种解决方案，终于实现了这个功能。我们以json为例，贴出个demo供大家参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json文件下载</title>
</head>
<body>
<div class="download">
    <button>下载</button>
</div>
<script>
    var eleButton = document.querySelector('button');

    // 下载文件方法
    var funDownload = function(content, filename) {
        var eleLink = document.createElement('a');//创建了一个a标签

        eleLink.download = filename;//设置要下载的文件名
        eleLink.style.display = 'none';//设置a标签隐藏
        // 字符内容转变成blob地址
        var blob = new Blob([content]);//可以看作是存放二进制数据的容器（file接口基于blob）
        console.log(blob);
        eleLink.href = URL.createObjectURL(blob);//将数据生成一个路径
        console.log(eleLink.href);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };

    //obj
    var json_str = { "people": [
        { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
        { "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},
        { "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
    ]};
    var str = JSON.stringify(json_str);//将json格式转为字符串再存入

    //判断浏览器是否支持a标签的download属性
    if('download' in document.createElement('a')) {
        eleButton.addEventListener('click', function() {
            funDownload(str, 'coordinate.json');//调用
        });
    } else {
        eleButton.onclick = function() {
            alert('浏览器不支持');
        };
    }
</script>
</body>

</html>

完。