vue 根据后端接口返回的字符串生成txt文件

本文讲述了如何处理后端接口返回的JSON格式数据,并将其编码为文本导出为txt文件,重点介绍了前端导出文件的方法和数据结构的理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导出的txt中是json格式数据,格式如下

[
    {
        "a": "11",
        "b": "12",
        "c": [
            {
                "a1-1": "aaa",
                "a1-2": "cc",
                "a1-3": [
                    {
                        "a1a1-1": "bbb1",
                        "a1a1-2": "bbb2",
                        "a1a1-3": "bbb3",
                        "a1a1-4": "bbb34"
                    },{
                        "a1a2-1": "bbb1",
                        "a1a2-2": "bbb2",
                        "a1a2-3": "bbb3",
                        "a1a2-4": "bbb34"
                    }
                ]
            },{
                "a2-1": "aaa",
                "a2-2": "cc",
                "a2-3": [
                    {
                        "a2a1-1": "bbb1",
                        "a2a1-2": "bbb2",
                        "a2a1-3": "bbb3",
                        "a2a1-4": "bbb34"
                    },{
                        "a2a2-1": "bbb1",
                        "a2a2-2": "bbb2",
                        "a2a2-3": "bbb3",
                        "a2a2-4": "bbb34"
                    }
                ]
            }
        ]
    }
]

格式可以自己定义,反正返回给前端都是一串字符串,前端将数据写入txt文档代码如下:

//导出
	  exportFile(){
    	let _this = this;
    	let param = {
			paramName:_this.paramName
		}
		//exportdata就是后端接口,txt中内容就来自后端接口返回的字符串数据
		  exportdata(paramName).then((res) => {
			  if (res && res.code === "00000" && res.data!=null ) {
			  //文件名
				  const name = "数据导出.txt";
				  const element = document.createElement('a')
				  // 此处,我这边后端接口返回的字符串存在res.data.dataJson中,res.data.dataJson可以替换成你自己想要写入txt的字段名
				  //一定要清楚你后端接口返回的数据格式,不清楚可以debugger看结构,或者代码中加console.log输出接口返回的数据,这样可以定位到具体返回的哪个字段是要写入txt的字符串
				  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.data.dataJson))
				  element.setAttribute('download', name)
				  element.style.display = 'none'
				  element.click();
			  }
		  });
	  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值