【无标题】vue实现将后端返回的数据保存为txt文件,下载下来

最新推荐文章于 2023-07-27 16:24:44 发布

七七Cqq

最新推荐文章于 2023-07-27 16:24:44 发布

阅读量1.6k

点赞数 3

分类专栏：功能代码文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67869050/article/details/129085087

版权

功能代码专栏收录该内容

17 篇文章 1 订阅

订阅专栏

后端返回的数据,自己拼接一下,然后下载成txt文件

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

<span @click="xiazitxt()">下载txt</span>

//打印出来的数据,换成接口中的数据,直接赋值就可以
data() {
  return {
  	        loginName: '七七',
            loginPassword: '',
            activCodeData: [
                {
                    name: '1111',
                    code: 'aaaaa'
                },
                {
                    name: '2222',
                    code: 'bbbbb'
                },
                {
                    name: '3333',
                    code: 'cccc'
                }
            ]
  }
}


methods: {
		//文件流点击下载的方法
		//dataStr: 需要下载出来的字符串
        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()
        },
        //按钮点击事件 (点击的时候,把需要打印出来的数据按照自己想要的,拼接出来,然后传到下载的方法中就可以了)
        xiazitxt() {
            let strArr = ''
            for(var i = 0; i < this.activCodeData.length; i++) {
                strArr += '硬件产品名称:' + this.activCodeData[i].name +  '\xa0\xa0' + '\xa0\xa0' + '\xa0\xa0' + '激活码:' + this.activCodeData[i].code + "\n" + "\n"
            }
            let str = '1, 机构后台信息: ' + "\n" + " \n" + 
            '2, 机构前端地址: ' + "\n" + " \n" + 
            '3, 账号信息: ' + "\n" + " \n" + 
            '用户名: ' + this.loginName + "\n" + " \n" + 
            '密码: 111111'  + "\n" + " \n" + 
            '4, 设备激活码信息: ' + "\n" + " \n" + 
            strArr

            this.exportText(str)
        }
}