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表格文件

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

现在的HTML5，有了FileReader文件读写API， 真是让javascript的能力大幅提升。

解析zip压缩文件、解析Excel xlsx 表格文档各种文件预览，实现起来也有了可能性，以前的js是完全无法实现的。

github找了一下，找到3个热门的excel的js开源库。

xlsx.js
Github: https://github.com/SheetJS/js-xlsx

这个是最热门的了。

exceljs
Github: https://github.com/exceljs/exceljs

xlsx-populate.js
Github: https://github.com/dtjohnson/xlsx-populate

Excel表格相关JS库 demo示例

• Exceljs 入门示例教程 Example
• Sheetjs xlsx.js 入门示例教程 demo
• xlsx-populate.js 例子 Example
• exceljs 对比 sheetjs 、 xlsx-populate js库