vue 预览 txt

vue 预览 txt

1.核心代码

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="预览txt"
                 left-text="返回"
                 left-arrow
                 class="title"
                 @click-left="onClickLeft"
                 fixed
                 :placeholder="isFixedHeight"
    />
    <div>{{txt}}</div>

  </div>
</template>

<script>


export default {
  name: 'Txt',
  data() {
    return {
      isFixedHeight: true,
      txt: '',
      url: 'https://xx.txt',
    }
  },
  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },
    readFile(filePath) {
      // 创建一个新的xhr对象
      let xhr = null, okStatus = document.location.protocol === 'file' ? 0 : 200
      xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
      xhr.open('GET', filePath, false)
      xhr.overrideMimeType('text/html;charset=utf-8')
      xhr.send(null)
      return xhr.status === okStatus ? xhr.responseText : null
    }


  },

  created() {
    this.txt = this.readFile(this.url)
  }

}
</script>
<style scoped>

.word-wrap {
  padding: 15px;

  /*img {*/
  /*  width: 100%;*/
  /*}*/
}

</style>