浏览器控制台 JavaScript 保存数据到硬盘文件

最新推荐文章于 2024-05-24 11:50:17 发布

锦天

最新推荐文章于 2024-05-24 11:50:17 发布

阅读量2.5k

点赞数 1

分类专栏： JS 文章标签： fetch 浏览器 DOM 文件保存 console

本文链接：https://blog.csdn.net/wuyujin1997/article/details/108331790

版权

JS 专栏收录该内容

107 篇文章 4 订阅

订阅专栏

文章目录

写数据到文件 - 方法封装

/**
 * 保存数据到指定的文件
 *  利用 Blob 对象把要下载的数据转换为二进制
 *  然后利用<a>的href属性和download属性，click事件，实现数据下载。
 * @param {string} filename 要保存的文件名
 * @param {string} str 要保存的文本内容
 */
function saveStringToFile(filename, str) {

    // 创建一个 <a> 标签对象
    var linkTag = window.document.createElement("a");
    // 设置该实例的 download 和 href 属性(HTML 5 标准属性)
    linkTag.download = filename;
    linkTag.href = window.URL.createObjectURL(new Blob([str]));

    // 把刚才手动创建的 <a> 添加到 DOM 文档中
    window.document.body.appendChild(linkTag);
    linkTag.click();    // 调用点击事件
    // 移除刚才添加的子标签
    window.document.body.removeChild(linkTag);
    
}

// 调用测试(字符串可以是任意来源，比如 fetch API 获取的JSON数据)
saveStringToFile("1.txt", "沧海一声笑");

原理解析

HTML 5 a标签新属性 download

<a>标签的属性download和href，用法见 https://www.runoob.com/tags/tag-a.html

在这里插入图片描述
2. HTML 演示

新建test.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a id="app">点击试试</a>
    <script>
        var linkTag = document.getElementById("app");
        var str = "沧海一声笑"; // 要保存的数据
        linkTag.href = window.URL.createObjectURL(new Blob([str]));
        linkTag.download = "2.txt";

		// linkTag.click(); // 代码调用点击事件，也可以鼠标点击后触发。
    </script>
    
</body>
</html>

点击链接后，弹出文件下载框。
在这里插入图片描述
3. 应用

使用浏览器看到一些想要保存的数据，可以使用：
- fetch API 获取响应的JSON数据；
- 以上封装的方法保存数据到本地文件

Demo

雪球网-行情 https://xueqiu.com/hq
流程略，代码如下：

function saveStringToFile(filename, str) {
    var linkTag = window.document.createElement("a");
    linkTag.download = filename;
    linkTag.href = window.URL.createObjectURL(new Blob([str]));

    window.document.body.appendChild(linkTag);
    linkTag.click();
    window.document.body.removeChild(linkTag);
}

await fetch("https://xueqiu.com/service/v5/stock/screener/screen?category=CN&size=10&order=desc&order_by=follow7d&only_count=0&page=1&_=1598890471819", {
    "credentials": "include",
    "headers": {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0",
        "Accept": "*/*",
        "Accept-Language": "en-US,en;q=0.5",
        "cache-control": "no-cache",
        "X-Requested-With": "XMLHttpRequest"
    },
    "referrer": "https://xueqiu.com/hq",
    "method": "GET",
    "mode": "cors"
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  // console.log("data", data);     // josn类型
  var str = JSON.stringify(data, null, "  ");
  var filename = "行情.json";
  saveStringToFile(filename, str);  // 把提取到的数据保存到文件
});

就可以获取到部分JSON数据。

在这里插入图片描述

文件
行情.json

{
  "data": {
    "count": 4069,
    "list": [
      {
        "pct": 1.68,
        "symbol": "SH600519",
        "current": 1786.5,
        "follow7d": 18250,
        "name": "贵州茅台",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -0.98,
        "symbol": "SZ000651",
        "current": 54.5,
        "follow7d": 15903,
        "name": "格力电器",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": 3.33,
        "symbol": "SH600887",
        "current": 41.94,
        "follow7d": 14033,
        "name": "伊利股份",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": 1.27,
        "symbol": "SH603288",
        "current": 183.2,
        "follow7d": 13156,
        "name": "海天味业",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -2.83,
        "symbol": "SZ002352",
        "current": 85.1,
        "follow7d": 12627,
        "name": "顺丰控股",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -1.63,
        "symbol": "SH601318",
        "current": 76.62,
        "follow7d": 9714,
        "name": "中国平安",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -1.98,
        "symbol": "SH600036",
        "current": 37.69,
        "follow7d": 9505,
        "name": "招商银行",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -0.21,
        "symbol": "SZ000858",
        "current": 240,
        "follow7d": 8548,
        "name": "五粮液",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -1.31,
        "symbol": "SZ000568",
        "current": 149.5,
        "follow7d": 8166,
        "name": "泸州老窖",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      },
      {
        "pct": -2.56,
        "symbol": "SZ000895",
        "current": 63.5,
        "follow7d": 8080,
        "name": "双汇发展",
        "type": 11,
        "tick_size": 0.01,
        "has_follow": false
      }
    ]
  },
  "error_code": 0,
  "error_description": ""
}