页面内容，保存为TXT，下载到电脑

 

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");
},

完成~！