乐趣区

关于javascript:JS实现将文本或JSON内容下载到文件中

jiezi

有时候在前端开发过程中，可能遇到这样的需要场景： 须要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比方博客文章，也可能是后端接口返回的 JSON 数据。

1、下载文本

那么须要如何实现 JS 下载文本内容呢？能够借助于 Blob 对象和 a 标签的 download 属性 来实现，具体代码如下：

Blob 对象示意一个不可变、原始数据的类文件对象。它的数据能够按文本或二进制的格局进行读取，也能够转换成 ReadableStream 来用于数据操作；

a 标签的 download 属性是 HTML5 中新增的，用来间接进行文件下载；

function downloadText(fileName, text) {
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob();
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    // 设置 download 属性
    saveLink.download = fileName;
    saveLink.click();}

上面来测试一下，能够间接在 Chrome 的 console 中进行测试 

downloadText('test.txt', '测试')

运行后，能够看到浏览器会下载一个名为 test.txt 的文件

2、下载 JSON

有时候后端接口返回了一个 JSON 对象，为了不便查看和核查数据，可能想将其下载到文件中，那么只须要将下载文本的办法略微革新一下即可，具体代码如下：

function downloadJson(fileName, json) {const jsonStr = (json instanceof Object) ? JSON.stringify(json) : json;
    
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob([jsonStr]);
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    saveLink.download = fileName;
    saveLink.click();}

上面来测试一下 

downloadJson('test.json', {id: 1, name: 'js'})

运行后，浏览器会主动下载一个名为 test.json 的文件，其内容如下：

{"id":1,"name":"js"}

3、下载 JSON 并格式化

有的时候可能心愿保留到文件中的 json 数据是格式化的，这样不便查看，那么只须要略微调整一下 JSON.stringify() 办法即可，先来看看 JSON.stringify() 办法的定义 

JSON.stringify(value[, replacer [, space]])

value

  • 将要序列化成 一个 JSON 字符串的值。

replacer 可选

  • 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会通过该函数的转换和解决；如果该参数是一个数组，则只有蕴含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

space 可选

  • 指定缩进用的空白字符串，用于丑化输入（pretty-print）；如果参数是个数字，它代表有多少的空格；下限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

如果想要格式化 JSON，那么能够传入一个 space 参数，具体如下：

JSON.stringify(json, null, 4);

除了应用 4 个空分外，还能够制表符（\t）来缩进，如下：

JSON.stringify(json, null, '\t');

下载格式化 JSON 办法批改如下：

function downloadJson(fileName, json) {const jsonStr = (json instanceof Object) ? JSON.stringify(json, null, 4) : json;
    
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob([jsonStr]);
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    saveLink.download = fileName;
    saveLink.click();}

上面来测试一下 

downloadJson('test.json', {id: 1, name: 'js'})

运行后，浏览器会主动下载一个名为 test.json 的文件，其内容如下：

{
    "id": 1,
    "name": "js"
}
退出移动版