1.页面代码
<template>
<div class="cont">
<img src="@/assets/img/fire-saver.jpg" class="function-img" alt="">
<el-form class="cont-content">
<el-form-item label="接口" label-width="3rem">
<el-select v-model="setFireCfg.data.CMode" size="small" style="width: 100%;text-align:left ">
<el-option :value="parseInt(0)" label="串口"/>
<el-option :value="parseInt(1)" label="并口"/>
</el-select>
</el-form-item>
<el-form-item label="主机" style="width:200px" label-width="3rem">
<el-select blur v-model="setFireCfg.data.fire" style="width:100%" size="small" class="main-eng" @change="selectChange">
<el-option v-for="item in fireList" class="main-eng" style="width:200px" :key="item.id" :label="item.v" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item label="主机图 " label-width="3rem">
<img class="main-engire" :src="imgPath" alt="">
</el-form-item>
<div align="center">
<el-button @click="saveDate" size="small" style="margin-bottom:20px;margin-top:60px" type="primary" icon="el-icon-edit">设置</el-button>
</div>
<el-form-item label="数据" label-width="3rem">
<el-input v-model="getState.data" label-width="6rem" style="width: 100%;text-align:left "></el-input>
</el-form-item>
</el-form>
<el-form style="margin-top:0px">
<el-form-item label="采集数据" label-width="4rem">
</el-form-item>
</el-form>
<el-button type="primary" class="impor" plain @click="downloadTxt">导出</el-button>
<textarea type="text" v-model="getHEXDatas.data" disabled label-width="2rem" class="orignal" style="min-height: 133px;"></textarea>
</div>
</template>
<script>
import {tcpclientPath} from '@/modules/iot/http/apiResources'
import {saveAs} from 'file-saver'
// import svg-icon from '@/components/svg-icon'
export default {
components: {
// svg-icon
},
props: {},
data() {
return {
getFireCfg: {
port: 23900,
type: 'getFireCfg'
},
getState: {
port: 23900,
type: 'getState',
data: ''
},
setFireCfg: {
port: 23900,
type: 'setFireCfg',
data: {}
},
getFireList: {
port: 23900,
type: 'getFireList',
data: ''
},
getHEXDatas: {
port: 23900,
type: 'getHEXDatas',
data: ''
},
fireList: [],
textarea1: '',
imgPath: ''
}
},
mounted() {
this.loadData()
this.timer = setInterval(this.getfireState, 2000)
this.timerr = setInterval(this.getfireHEXDatas, 2000)
},
beforeDestroy() {
clearInterval(this.timer)
clearInterval(this.timerr)
},
methods: {
loadData() {
this.$http.post(tcpclientPath, this.getFireList).then((res) => {
if (res.data.code === 200) {
this.fireList = res.data.data
}
})
this.$http.post(tcpclientPath, this.getFireCfg).then((res) => {
if (res.data.code === 200) {
this.setFireCfg.data = res.data.data
let s = '消防配置[' + res.data.data.ver + ']'
this.$emit('changedFire', s)
}
})
},
getfireState() {
this.$http.post(tcpclientPath, this.getState).then((res) => {
if (res.data.code === 200) {
this.getState.data = res.data.data
}
})
},
getfireHEXDatas() {
this.$http.post(tcpclientPath, this.getHEXDatas).then((res) => {
if (res.data.code === 200) {
this.getHEXDatas.data += res.data.data
}
})
},
saveDate() {
this.$http.post(tcpclientPath, this.setFireCfg).then((res) => {
if (res.data.code === 200) {
alert('设置成功')
}
})
},
selectChange() {
this.imgPath = '/img/' + this.setFireCfg.data.fire + '.jpg'
},
getDownload() {
const anchor = document.createElement('a')
anchor.href = `/#/setupn/index.txt`
anchor.setAttribute('download', '原始数据.txt')
anchor.innerHTML = 'downloading...'
anchor.style.display = 'none'
document.body.appendChild(anchor)
setTimeout(() => {
anchor.click()
document.body.removeChild(anchor)
setTimeout(() => {
self.URL.revokeObjectURL(anchor.href)
}, 250)
}, 66)
},
downloadTxt() {
let str = this.getHEXDatas.data
let strData = new Blob([str], {type: 'text/plain;charset=utf-8'})
saveAs(strData, '测试文件下载.txt')
}
}
}
</script>
<style>
.cont {
/* position: relative;
display: flex;
flex-wrap: wrap; */
background-color: white;
padding-bottom: 5px;
width: 100%;
}
.cont-content {
justify-content: left;
width: 100%;
margin-top: 10px;
}
.original-data {
border-radius: 10px;
font-size: 16px;
width: 100%;
min-height: 90px;
margin-top: 0px;
border: 1px solid rgb(0, 0, 0);
}
.main-engire {
width: 200px;
height: 80px;
border: 1px solid #000000;
}
.function-img {
width: 100%;
}
.impor {
position: absolute;
right: 0;
top: 389px;
/* width: 40px; */
float: right;
border-radius: 5px;
/* height: 24px; */
text-align: center;
vertical-align: middle;
background-color: rgba(15, 166, 204, 0.89);
color: aliceblue;
}
.impor-word {
font-size: 16px;
width: 60px;
height: 20px;
margin-top: 5px;
border: 1px solid #f5f5f5;
}
.main-en {
width: 190px !important;
text-align: left;
}
.orignal {
width: 100%;
text-align: left;
min-height: 200px;
}
.page-bestinline{
width: 100%;
}
.page-beforeline{
width: 100%;
}
</style>
2.所需配置
Vue 将字符串保存成 TXT 文件保存到电脑
vue 前端有一段字符串,然后点击按钮,将字符串保存到 txt 文件下载到电脑。
首先需要安装一下依赖:
npm install file-saver --save
安装完成,在需要下载txt文件的页面引入一下库。
import { saveAs } from 'file-saver';
点击按钮执行下面保存 txt 文件的代码:
downloadTxt() {
let str = '王佳伟Vue字符串保存到txt文件下载到电脑案例'
let strData = new Blob([str], { type: 'text/plain;charset=utf-8' });
saveAs(strData, "测试文件下载.txt");
},
完成~!