SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link href="https://lib.baomitu.com/element-ui/2.15.5/theme-chalk/index.min.css" rel="stylesheet">
</head>

<body>
	<div id="app">
         <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
		<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :on-change='onChange'
		 :on-remove="handleRemove" :auto-upload="false">
			<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
			<div slot="tip" class="el-upload__tip">只能上传excel文件</div>
		</el-upload>
		<el-table v-if="tableData.length" :data="tableData" border :max-height='500'>
			<el-table-column fixed type="index" align='center' width="50">
			</el-table-column>
			<el-table-column v-for="(item, index) in tableColumn" :key="index" :prop="item" :label="item" :show-overflow-tooltip='true'
			 width="180" align='center'>
			</el-table-column>
		</el-table>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js">
</script>
<!-- import JavaScript -->
<script src="https://lib.baomitu.com/element-ui/2.15.5/index.min.js">
</script>
<script>
	new Vue({
    el: '#app',
    data: function() {
    return {
        fileList: [],
        tableColumn:[],
        tableData:[],
           options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value:''
        
        }
    },
    methods:{
        submitUpload(){
            let formData = new FormData()
            formData.append('file',this.fileList[0]['raw'])
            // .... axios.post('/upload',formData)
        },
        /* 文件状态改变时的钩子 */
        async onChange(ev, fileList){
            this.fileList = fileList.slice(-1);
            let file = ev.raw // ev.raw 为上传的文件数据
            if (!file) return
            // 读取file中的数据
            let data = await readFile(file)
            let workbook = XLSX.read(data, { type: 'binary' })
            let worksheet = workbook.Sheets[workbook.SheetNames[0]]

            // 设置表头
            let gridRange = worksheet['!ref']
            // 26进制转10进制
            let startRange = convert26BSToDS(trimNumber(gridRange.split(':')[0]))
            let endRange =  convert26BSToDS(trimNumber(gridRange.split(':')[1]))
            let arr = []
            for(let i = startRange; i <= endRange; i++){
            // 10进制转回26进制
                arr.push(convertDSTo26BS(i))
            }
            this.tableColumn = arr

            // 设置表格数据
            let option = {
                blankrows: true, // 在输出中包含空行
                header: 'A', // 1是生成二维数组 'A'是数组对象格式
                defval: '' // 使用空字符串代替 null 或 undefined
            }
            data = XLSX.utils.sheet_to_json(worksheet, option) // 将数据转换成JSON格式
            this.tableData = data
        },
        /* 文件列表移除文件时的钩子 */
        handleRemove(){
            this.tableData = []
            this.tableColumn = []
        }
    }
})

// 把文件按照二进制进行读取
function readFile(file) {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file) // 把当前文件以二进制进行读取
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}
// 过滤字符串中的数字。
function trimNumber(str){
  return str.replace(/\d+/g,'');
}

// 26进制转十进制
function convert26BSToDS(code){
  var num=-1;
  var reg = /^[A-Z]+$/g;
  if(!reg.test(code)){
      return num;
  }
  num=0;
  for (var i = code.length - 1, j = 1; i >= 0; i--, j *= 26){
      num +=  (code[i].charCodeAt() -64 )* j;
  }
  return num;
}

// 十进制转26进制
function convertDSTo26BS(num){
  var code='';
  var reg = /^\d+$/g;
  if(!reg.test(num)){
      return code;
  }
  while (num>0){
     var m = num % 26
      if (m==0){
          m = 26;
      }
      code =   String.fromCharCode(64 + parseInt(m)) + code;
      num = ( num - m ) /26;
  }
  return code;
}

</script>

</html>

            

                
本项目引用的自定义外部资源