有时候在前端开发过程中，可能会遇到这样的需求场景：需要将页面上的文本内容下载到文件中，而内容可能是一个大文本字段，比如博文，也可能是后台接口返回的JSON数据。1、下载文本那么如何实现JS下载文本内容呢？可以借助Blob对象和a标签的download属性来实现。具体代码如下：Blob对象表示一个不可变的、原始数据文件类对象。其数据可以以文本或二进制格式读取，也可以转换为ReadableStream进行数据操作；a标签的download属性是HTML5新增的，用于直接下载文件；functiondownloadText(fileName,text){consturl=window.URL||窗口.webkitURL||窗户;constblob=newBlob([文本]);constsaveLink=document.createElementNS('http://www.w3.org/1999/xhtml','a');saveLink.href=url.createObjectURL(blob);//设置下载属性saveLink.download=fileName;saveLink.click();}来测试一下，可以直接在Chrome控制台中测试downloadText('test.txt','test')运行后可以看到浏览器会下载一个名为test.txt的文件2.下载JSON有时后台接口会返回一个JSON对象，为了方便查看和查看数据，你可能希望将其下载到一个文件中，那么只需要稍微修改一下下载文本的方法即可，具体代码如下如下：functiondownloadJson(fileName,json){constjsonStr=(jsoninstanceofObject)?JSON.stringify(json):json;consturl=window.URL||窗口.webkitURL||窗户;constblob=newBlob([jsonStr]);constsaveLink=document.createElementNS('http://www.w3.org/1999/xhtml','a');saveLink.href=url.createObjectURL(blob);保存链接.download=文件名；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字符串valuereplacerOptional如果参数是一个函数，那么在序列化过程中，序列化值的每个属性都会被函数转换处理;如果参数是数组，只有数组中包含的值和属性名会被序列化为最终的JSON字符串；如果此参数为null或未提供，则将序列化对象的所有属性。space可选地指定用于缩进的空白字符串，用于漂亮打印；如果参数是数字，则表示有多少个空格；上限为10，小于1表示没有空格；如果参数是字符串（当字符串长度超过10个字母时，取前10个字母），字符串将被视为空格；如果未提供参数（或null），则不会有空格。如果要格式化JSON，可以传入一个空格参数，如下：JSON.stringify(json,null,4);除了使用4个空格，还可以使用制表符（\t）进行缩进，如下：JSON.stringify(json,null,'\t');下载格式化JSON的方法修改如下：functiondownloadJson(fileName,json){constjsonStr=(jsoninstanceofObject)?JSON.stringify(json,null,4):json;consturl=window.URL||窗口.webkitURL||窗户;constblob=newBlob([jsonStr]);constsaveLink=document.createElementNS('http://www.w3.org/1999/xhtml','a');saveLink.href=url.createObjectURL(blob);saveLink.download=文件名;saveLink.click();}下面我们来测试一下downloadJson('test.json',{id:1,name:'js'})运行后，浏览器会自动下载一个名为test.json的文件，内容如下：{"id":1,"name":"js"}
