JS实现将文本或JSON内容下载到文件中

目录
文章目录隐藏
  1. 1、下载文本
  2. 2、下载 JSON
  3. 3、下载 JSON 并格式化

前端开发可能遇到这样的需求场景:需要将页面上的文本内容下载到文件中,内容可能是某个大的文本字段,比如博客文章,也可能是后端接口返回的 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([text]);
    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', '测试')

JS 实现将文本或 JSON 内容下载到文件中

运行后,可以看到浏览器会下载一个名为 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 的文件,其内容如下:

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"
}

做的项目多了,在前端开发中进场会遇到各种需求,个人觉得不错,可以提供一个思路,感谢阅读。

原文链接:点击这里

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JS实现将文本或JSON内容下载到文件中

发表回复