HTML page to preview the contents of a spreadsheet file

Brief Background

Before a spreadsheet file uploaded to the server, JS file and read the contents of the table to the page file output

vue project

Third party

exceljs

• installation
  • npm install exceljs
• Plug-in uses
  • github Chinese document address

element ui

• File Selection
  • the-upload
• Data Display
  • the-table

Code and instructions

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);
},

Reference links

On the browser open, preview Excel xlsx spreadsheet file

On the browser open, preview Excel xlsx spreadsheet file

Now HTML5, with FileReader file read and write API, the ability to really let javascript increased dramatically.

Parsing zip file, Excel xlsx spreadsheet document parsing various file preview, also have the possibility to implement previous js is completely unattainable.

github looking for a bit to find three popular open source excel in js library.

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

This is the most popular.

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

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

Excel spreadsheet example related to JS library demo

• Exceljs Getting Started tutorial examples Example
• Sheetjs xlsx.js start example tutorial demo
• Examples Example xlsx-populate.js
• exceljs contrast sheetjs, the populate XLSX- JS library