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

水深无声 2022-12-02 15:27 259阅读 0赞

### 文章目录 ###

*   *  写数据到文件 - 方法封装
     *  原理解析
     *  Demo
     *  MDN Links

## 写数据到文件 - 方法封装 ##

/** * 保存数据到指定的文件 * 利用 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", "沧海一声笑");

## 原理解析 ##

1.  HTML 5 a标签 新属性 download

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]  
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>

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

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

## Demo ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]

*  文件  
    行情.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": ""
    }

以上测试过程，仅供学习参考。

## MDN Links ##

前端基础(HTML,CSS,JavaScript)这块有什么疑问，可以直接百度`MDN xxx`，基本都会有结果。

以下：

*  [Blob类型][Blob]
 *  [fetch API][]
 *  [URL.createObjectURL][]
 *  [document.createElement][]

[https_www.runoob.com_tags_tag-a.html]: https://www.runoob.com/tags/tag-a.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3ca3a8d99f334bbd9612a5e15d4e0bd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/644c9ca6e7ff4f2eb12617504fef1040.png
[fetch API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
[https_xueqiu.com_hq]: https://xueqiu.com/hq
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/b8fd4880c2a942be8491f24c92a3ebe2.png
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
[URL.createObjectURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
[document.createElement]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement