vue实现将后端传输字符串保存为txt文件

前言

本次实现很简单,就是单纯的将字符文本保存到前端txt文件可以供展示后端传的信息。
在这里插入图片描述
以上截图为浏览器触发该对应的方法,把文件保存为txt文件下载下来。
那么在之前的文件,实际上我是有通过后端传文件流给前端,通过链接进行下载文件到前端,如果感兴趣可以看看。

vue+springboot使用文件流实现文件下载

vue+springboot使用文件流实现文件下载

将字符串保存为txt文件

字符任意,可以是数字,汉字,英文。
如:

let str = "我是需要传输的文字#¥&*……&*233647gahdgsjagdsadsad";

调用方法

      exportText (dataStr) {
        const name = "文件名称";
        const element = document.createElement('a')
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(dataStr))
        element.setAttribute('download', name)
        element.style.display = 'none'
        element.click()
      },

其中
name为文件名称
dataStr为需要传的字符串
在需要导出txt的地方调用该方法即可导出txt

结果

以下为我项目中需要收集错误信息,把错误信息一次性展示给用户的例子结果。

在这里插入图片描述

结语

以上,就是我用vue实现将字符串保存为txt文件

### 回答1: 在 Vue 中,当你使用 `console.log` 来打印后端返回的数据时,如果数据是一个对象,那么它会被输出为 `object`。这是因为 JavaScript 的 `console.log` 函数在输出对象时,会将对象的类型(在这种情况下是 `object`)输出到控制台。 如果你希望查看对象中包含的具体内容,你可以使用下面的方法之一: - 在控制台中将对象展开,例如 `console.log(obj)` - 使用 `JSON.stringify` 将对象转换为字符串,例如 `console.log(JSON.stringify(obj))` 例如,如果你的后端返回的数据是一个对象,你可以这样打印出来: ``` axios.get('/api/user').then(response => { console.log(response.data) // 输出到控制台的是 "object" console.log(JSON.stringify(response.data)) // 输出对象的内容 }) ``` ### 回答2: 在Vue中,打印后端返回的数据是Object的原因有以下几点: 1. 后端返回的数据通常是以JSON格式传输,而JSON是一种轻量级的数据交换格式,用于前后端数据的传递和解析。在JavaScript中,JSON数据会被解析成Object对象,因此在Vue中打印后端返回的数据时,会以Object形式显示。 2. Vue中的数据绑定机制是基于对象的,通过将后端返回的数据绑定到Vue的data属性上,可以实现视图和数据的双向绑定。而Object是JavaScript中最常用的数据结构之一,具有键值对的特性,非常适合在Vue中进行数据绑定和操作。 3. 使用Object对象可以方便地对后端返回的数据进行操作和访问。通过Object的属性和方法,我们可以迅速地访问数据的特定字段,对数据进行遍历、过滤、排序等操作,满足不同的业务需求。 4. Object对象在Vue的组件通信中起到了重要的作用。在Vue中,我们可以通过props和$emit等方式实现父子组件之间的数据传递和通信。而通过使用Object对象,可以将后端返回的数据以属性的形式传递给子组件,提高组件的复用性和灵活性。 综上所述,Vue中打印后端返回的数据为Object的原因是由于JSON数据格式的传输和解析,数据绑定的需要,数据的操作和访问的便捷性,以及组件通信的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值