HTML页面预览表格文件内容

背景简介

在将一个表格文件上传到服务器上之前，JS读取表格文件并将文件内容输出到页面中

vue项目

第三方

exceljs

• 安装
  • npm install exceljs
• 插件使用
  • github 中文文档地址

element ui

• 文件选择
  • el-upload
• 数据展示
  • el-table

代码以及说明

import Excel from 'exceljs';  // 引入exceljs
// 预览表格文件
previewFile(){
    let _this=this
    // 获取选择的文件
    let file = this.file
    let reader = new FileReader();
    // 在读取器加载资源停止进度时读取表格文件
    reader.onloadend = event=>{
        // arrayBuffer为加载后的资源
        let arrayBuffer = reader.result;
        let workbook = new Excel.Workbook();
        workbook.xlsx.load(arrayBuffer).then((workbook)=> {
            let result = ''
            // 只读取文档的第一个sheet页
            let sheet= workbook.worksheets[0]
            let tableData=[]
            // 获取每一行的数据
            sheet.eachRow((row, rowNumber)=> {
                let data=[]
                row.values.forEach((val,valIdx)=>{
                    data.push(val)
                })
                tableData.push(data)
                _this.tableData=tableData
            })
        })
    };
    reader.readAsArrayBuffer(file);
},

参考链接

在浏览器上打开、预览Excel xlsx表格文件