关于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},

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