vue前端解析excel并在页面展示数据

最新推荐文章于 2025-11-10 05:56:44 发布
原创最新推荐文章于 2025-11-10 05:56:44 发布 · 2.2k 阅读
8 ·
CC 4.0 BY-SA版权
excel 专栏收录该内容
1 篇文章
订阅专栏
本文介绍了如何使用Vue框架结合XLSX库，实现文件上传、解析Excel内容为JSON格式，并在前端展示数据的过程，包括文件选择、数据预处理和表格显示。
使用vue实现关于前端导入excel 解析成json并在页面展示数据
<template>
  <div class="app-container">
    <div class="index" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中...">
      <input
        type="file"
        @change="importFile(this)"
        id="imFile"
        style="display: none"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
      <a id="downlink"></a>
      <el-button class="button" @click="uploadFile()">导入</el-button>
      <el-button class="button" @click="downloadFile(excelData)">导出</el-button>
      <!--错误信息提示-->
      <el-dialog title="提示" v-model="errorDialog" size="tiny">
        <span>{{errorMsg}}</span>
        <span slot="footer" class="dialog-footer">
   <el-button type="primary" @click="errorDialog=false">确认</el-button>
   </span>
      </el-dialog>
      <!--展示导入信息-->
      <el-table :data="excelData" tooltip-effect="dark">
        <el-table-column label="题型" prop="attachmentType" show-overflow-tooltip></el-table-column>
        <el-table-column label="题干" prop="question" show-overflow-tooltip></el-table-column>
        <el-table-column label="选项A" prop="optionA" show-overflow-tooltip></el-table-column>
        <el-table-column label="选项B" prop="optionB" show-overflow-tooltip></el-table-column>
        <el-table-column label="选项C" prop="optionC" show-overflow-tooltip></el-table-column>
        <el-table-column label="选项D" prop="optionD" show-overflow-tooltip></el-table-column>
        <el-table-column label="解析" prop="analysis" show-overflow-tooltip></el-table-column>
        <el-table-column label="答案" prop="answer" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script type="javascript">
  import { formatDate } from '@/utils/date.js'
  import Pagination from '@/components/Pagination'
  import vueJsonEditor from 'vue-json-editor'
  var XLSX = require('xlsx')
  export default {
    name: 'questionList',
    filters: {
      // statusFilter(status) {
      //   const statusMap = {
      //     published: 'success',
      //     draft: 'gray',
      //     deleted: 'danger'
      //   }
      //   return statusMap[status]
      // },
      formatDate(time) {
        if (time != null && time != '') {
          var date = new Date(Date.parse(time.replace(/-/g, '/')))
          return formatDate(date, 'yyyy-MM-dd')
        } else {
          return ''
        }
      }
    },
    total: 0,
    components: {
      Pagination,
      vueJsonEditor,

    },
    data() {
      return {
        fullscreenLoading: false, // 加载中
        imFile: '', // 导入文件el
        outFile: '', // 导出文件el
        errorDialog: false, // 错误信息弹窗
        errorMsg: '', // 错误信息内容
        excelData: [],

        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        },
        //弹窗
        isInputHidden:false,
        config: {},
        info:{},
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          editConfig: '',
          addConfig: ''
        },
        rules: {}
      }
    },
    created() {

    },
    mounted: function() {
      this.listLoading = true
      this.imFile = document.getElementById('imFile')
      this.outFile = document.getElementById('downlink')
    },
    methods: {
      uploadFile: function () { // 点击导入按钮
        this.imFile.click()
      },
      downloadFile: function (rs) { // 点击导出按钮
        let data = [{}]
        for (let k in rs[0]) {
          data[0][k] = k
        }
        data = data.concat(rs)
        this.downloadExl(data, '菜单')
      },
      importFile: function () { // 导入excel
        this.fullscreenLoading = true
        let obj = this.imFile
        if (!obj.files) {
          this.fullscreenLoading = false
          return
        }
        var f = obj.files[0]
        var reader = new FileReader()
        let _this = this
        reader.onload = function (e) {
          var data = e.target.result
          if (_this.rABS) {
            _this.wb = XLSX.read(btoa(this.fixdata(data)), { // 手动转化
              type: 'base64'
            })
          } else {
            _this.wb = XLSX.read(data, {
              type: 'binary'
            })
          }
          let json = XLSX.utils.sheet_to_json(_this.wb.Sheets[_this.wb.SheetNames[0]])
          console.log(typeof json)
          _this.dealFile(_this.analyzeData(json)) // analyzeData: 解析导入数据
        }
        if (this.rABS) {
          reader.readAsArrayBuffer(f)
        } else {
          reader.readAsBinaryString(f)
        }
      },
      downloadExl: function (json, downName, type) { // 导出到excel
        let keyMap = [] // 获取键
        for (let k in json[0]) {
          keyMap.push(k)
        }
        console.info('keyMap', keyMap, json)
        let tmpdata = [] // 用来保存转换好的json
        json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
          v: v[k],
          position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
        }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
          tmpdata[v.position] = {
            v: v.v
          }
        })
        let outputPos = Object.keys(tmpdata) // 设置区域,比如表格从A1到D10
        let tmpWB = {
          SheetNames: ['mySheet'], // 保存的表标题
          Sheets: {
            'mySheet': Object.assign({},
              tmpdata, // 内容
              {
                '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
              })
          }
        }
        let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
          {bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型
        ))], {
          type: ''
        }) // 创建二进制对象写入转换好的字节流
        var href = URL.createObjectURL(tmpDown) // 创建对象超链接
        this.outFile.download = downName + '.xlsx' // 下载名称
        this.outFile.href = href // 绑定a标签
        this.outFile.click() // 模拟点击实现下载
        setTimeout(function () { // 延时释放
          URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
        }, 100)
      },
      analyzeData: function (data) { // 此处可以解析导入数据
        return data
      },
      dealFile: function (data) { // 处理导入的数据
        console.log(data[0], '处理导入的数据')
        this.imFile.value = ''
        this.fullscreenLoading = false
        if (data.length <= 0) {
          this.errorDialog = true
          this.errorMsg = '请导入正确信息'
        } else {
          this.excelData = data.map(item => {
            const arrItem = {
              attachmentType:"",
              question:"",
              optionA:"",
              optionB:"",
              optionC:"",
              optionD:"",
              analysis:"",
              answer:""
            }
            //将excel文件的标题名称转换，将数据格式转换成数组显示格式
            for (let key in item) {
              if (key === '题型') {
                arrItem.attachmentType = item[key]
              } else if (key === '题干') {
                arrItem.question = item[key]
              } else if (key === '选项A') {
                arrItem.optionA = item[key]
              } else if (key === '选项B') {
                arrItem.optionB = item[key]
              } else if (key === '选项C') {
                arrItem.optionC = item[key]
              }else if (key === '选项D') {
                arrItem.optionD = item[key]
              }else if (key === '解析') {
                arrItem.analysis = item[key]
              }else if (key === '答案') {
                arrItem.answer= item[key]
              }
            }
            return arrItem
          })
        }
      },
      s2ab: function (s) { // 字符串转字符流
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i !== s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
      },
      getCharCol: function (n) { // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
        let s = ''
        let m = 0
        while (n > 0) {
          m = n % 26 + 1
          s = String.fromCharCode(m + 64) + s
          n = (n - m) / 26
        }
        return s
      },
      fixdata: function (data) { // 文件流转BinaryString
        var o = ''
        var l = 0
        var w = 10240
        for (; l < data.byteLength / w; ++l) {
          o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
        }
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
        return o
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-table th>.cell {
    text-align: center
  }
  .button {
    margin-bottom: 20px
  }
</style>