1.TXT预览

<template>
  <div class="txt-prew-container">
    <div class="txt-content" v-html="txt"></div>
  </div>
</template>

<script>
export default {
  name: 'TxtPrew',
  data() {
    return {
      txtUrl: '',
      txt: '',
    }
  },
  created() {
    this.txtPrew()
  },
  methods: {
    txtPrew() {
      let xhr = null
      xhr = new XMLHttpRequest()
      xhr.open('GET', this.txtUrl, false)
      xhr.overrideMimeType('text/html;charset=utf-8')
      xhr.send(null)
      this.txt = xhr.responseText.split('\n').join('<br />')
    }
  }
}
</script>

2. excel预览

2.1 代码

<template>
  <div class="excel-prew-container">
    <el-table style="width: auto" border :data="tableData" id="tableData">
      <template v-for="(item,index) in tableHead">
        <el-table-column
          :prop="item.column_name"
          :label="item.column_comment"
          :key="index"
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  name: 'ExcelPrew',
  data() {
    return {
      tableHead: [],
      tableData: [],
      url: ''
    }
  },
  created() {
    this.readWorkbookFromRemoteFile()
  },
  methods: {
    readWorkbookFromRemoteFile() {
      var xhr = new XMLHttpRequest()
      xhr.open('get', this.url, true)
      xhr.responseType = 'arraybuffer'
      const _this = this

      xhr.onload = function(e) {
        var binary = ''
        if (xhr.status === 200) {
          var bytes = new Uint8Array(xhr.response)
          var length = bytes.byteLength
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i])
          }
          var wb = XLSX.read(binary, { type: 'binary' })
          const result = []
          wb.SheetNames.forEach(sheetName => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
            })
          })

          if (result && result.length > 0) {
            const data = {}
            data.card = JSON.stringify(result[0].sheet)
            _this.excelToTable(data) // 调用生成table方法
          }
        }
      }
      xhr.send()
    },
    excelToTable(data) {
      const outData = JSON.parse(data.card)

      const tableHeadList = []
      let num = 1
      for (const tableHead2 in outData[0]) {
        const tableHead1 = {}
        tableHead1['column_name'] = 'column_name' + num
        tableHead1['column_comment'] = tableHead2
        num = num + 1
        tableHeadList.push(tableHead1)
      }
      this.tableHead = tableHeadList // 定制表头

      const tableDataList = []
      for (let j = 0; j < outData.length; j++) {
        const tableData1 = {}
        for (let k = 0; k < tableHeadList.length; k++) {
          for (const outDataKey in outData[j]) {
            if (tableHeadList[k]['column_comment'] === outDataKey) {
              tableData1[tableHeadList[k]['column_name']] = outData[j][outDataKey]
            }
          }
        }
        tableDataList.push(tableData1)
      }
      this.tableData = tableDataList // 给表格内容赋值
    }
  }
}
</script>

不支持sheet切换和单元格合并

2.2 参考文章

• https://blog.csdn.net/q2056105280/article/details/118190067
• https://blog.csdn.net/weixin_45956838/article/details/111867255