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庫