关于vue.js:excel流文件的前端展示显示表格

装置和引入xlsx依赖包
npm install -S xlsx
import XLSX from ‘xlsx’

excel表格显示

<div class="tableItem">
  <el-table :data="tableData.slice((currpage - 1) * pagesize , currpage * pagesize)" :row-class-name="tableRowClassName" :cell-style="columnStyle" border>
    <el-table-column v-for="(value,key,index) in tableData[0]" :key="index" :prop="key" :label="key" min-width="160px" align="left" :render-header="renderHeader">>
      <template slot-scope="scope">
         {{tableData.slice((currpage - 1) * pagesize , currpage * pagesize)[scope.$index][key]}}
      </template>
    </el-table-column>
  </el-table>
</div>
//不须要分页的话 这段和下面 "tableData.slice..." 间接换成tableData即可
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currpage"
  :page-sizes="[20, 40, 60, 80]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalNum">
</el-pagination>

import XLSX from 'xlsx'
import axios from 'axios'
export default {
  data() {
    return {
      currpage:1,
      pagesize:20,
      totalNum:0, 
      tableData: [],
      card: [], // excel表格sheet的数组
      cardActive: '', // excel表格以后显示的sheet
      workbook: {},
    };
  },
  mounted () {
    this.showStandard('Doc/code.xlsx');  //通过服务器获取流
    // this.readFile('code.xlsx')  //获取前端public下的excel文件
  },
}

获取excel的流文件

因为后盾获取文件流是 .net core异步获取，所以这里用async 和 await 解决

// 获取后盾的流文件
async showStandard(excelUrl){
        var type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        var filePaths = []
        filePaths.push(excelUrl)
        let res = await this.$axios.post("/api/Base/DownFileZip",filePaths,{ responseType: 'arraybuffer' })
        var data = new Uint8Array(res)
        var workbook = XLSX.read(data, {type:"array"})
        var sheetNames = workbook.SheetNames // 工作表名称汇合
        this.workbook = workbook
        this.card = sheetNames
        this.cardActive = sheetNames[0]
        this.getTable(sheetNames[0])
},
// 获取前端的流文件
readFile(url) {
        axios.get(url, {responseType:'arraybuffer'}).then((res) => {
            var data = new Uint8Array(res)
            var workbook = XLSX.read(data, {type:"array"})
            var sheetNames = workbook.SheetNames // 工作表名称汇合
            this.workbook = workbook
            this.card = sheetNames
            this.cardActive = sheetNames[0]
            this.getTable(sheetNames[0])
        })
    },
getTable (sheetName) {
        this.Matches = []
        this.currpage = 1
        var worksheet = this.workbook.Sheets[sheetName]
        this.tableData = XLSX.utils.sheet_to_json(worksheet)
        //获取第一行（即表头）
        var header = XLSX.utils.sheet_to_json(worksheet,{header:1})[0]
        var tableTitle = this.tableData[0]
        var table0 = {}
        //这里对表头进行解决，因为获取的数据渲染表头是依据第一条数据，
        //当excel文件中第一条数据有为空时，第一条数据没有此属性，数据就不渲染，所以把为空的属性设置成“”
        for(var i=0;i<header.length;i++){
            if(tableTitle.hasOwnProperty(header[i])){
                table0[header[i]] = tableTitle[header[i]]                
            }else{
                table0[header[i]] = ""
            }
        }
        this.tableData[0] = table0
        this.totalNum = this.tableData.length
},

设置表格款式

//给表头增加标识
renderHeader(h,{column,$index}){
  return h(
         'div',{style:'width:100%'},[
               h('span', column.label),
               h('span', {
                   class: "floatCR",
                   style:'color:#0094CE;margin-left:15px;font-family:Eurostile Bold'
                   },1==$index?'C':(3==$index?'R':''))
　　　　    　　],
　　　　   );
},
//给列设置背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex ==1||columnIndex ==3) 
  {
    return 'background:rgba(147, 195, 235,0.05);'
  }
},

表格分页

handleSizeChange(val) {
  this.pagesize = val
},
handleCurrentChange(val) {
  this.currpage = val
},

第一次写，就是想记录一下，有不标准的中央还请各位大哥赐教，谢谢！