如何實現一個表格 - Microsoft Excel

時間 2019-11-08

標籤如何實現一個表格 microsoft excel 欄目 Windows 简体版

原文原文鏈接

要實現表格，固然要先分析Microsoft Excel。下文是從個人角度，一步步對excel的數據結構進行分析。javascript

如何用nodejs導出excel文件

excel對於我來講是一個黑盒，要想分析excel的數據結構，首先要了解那些開源的工具庫是如何生成excel文件的。php

選擇excel-export這個npm包做爲入口，進行分析。經過官方文檔得知，主要經過如下函數實現的生成excelhtml

var nodeExcel = require('excel-export');
// ...中間不重要的代碼
nodeExcel.execute(conf)
複製代碼

經過查看excel-export源碼，能夠得知excel文件實際上是經過zip格式的壓縮包，精簡代碼以下：java

require('node-zip');
// ...
exports.execute = function(config) {
    var xlsx = new JSZip(templateXLSX, {
        base64: true,
        checkCRC32: false
    });
    // ...
    var results = xlsx.generate({
        base64: false,
        compression: "DEFLATE"
    });
    // ...
    return results;
}
複製代碼

這樣就簡單多了，咱們以後進行分析就能夠直接新建一個Excel文檔，按zip格式進行解壓，對解壓後的文件進行分析。node

提示：能夠直接修改excel的後綴名xlsx爲zip，而後使用解壓工具進行解壓。git

備註：若是要導出excel，直接使用相關的庫就能夠了，so easy。github

原始excel數據

sheet1: 做文npm

sheet2: 數學bash

分析解壓後的文件

解壓後的目錄結構以下(不一樣版本可能有些差異)：數據結構

.
├── [Content_Types].xml
├── _rels
├── docProps
│   ├── app.xml
│   └── core.xml
└── xl
    ├── _rels
    │   └── workbook.xml.rels
    ├── sharedStrings.xml
    ├── styles.xml
    ├── theme
    │   └── theme1.xml
    ├── workbook.xml
    └── worksheets
        ├── sheet1.xml
        └── sheet2.xml
複製代碼

相關文件夾和文件的做用，能夠經過文件名大體猜想出來。

核心：表格數據是怎麼儲存的

經過名稱能夠猜出來，xl/worksheets/sheet1.xml和xl/worksheets/sheet2.xml中存的是表格元數據。如下是sheet1.xml的內容:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac xr xr2 xr3" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:xr="http://schemas.microsoft.com/office/spreadsheetml/2014/revision" xmlns:xr2="http://schemas.microsoft.com/office/spreadsheetml/2015/revision2" xmlns:xr3="http://schemas.microsoft.com/office/spreadsheetml/2016/revision3" xr:uid="{F84174FE-05C3-E94C-9973-FAF4BA0FB974}">
    <dimension ref="A1:S13"/>
    <sheetViews>
        <sheetView tabSelected="1" topLeftCell="M1" workbookViewId="0">
            <selection activeCell="AD11" sqref="AD11"/>
        </sheetView>
    </sheetViews>
    <sheetFormatPr baseColWidth="10" defaultRowHeight="16"/>
    <cols>
        <col min="3" max="3" width="32.33203125" customWidth="1"/>
    </cols>
    <sheetData>
        <row r="1" spans="1:19" s="1" customFormat="1" ht="41" customHeight="1">
            <c r="A1" s="1" t="s">
                <v>0</v>
            </c>
            <c r="B1" s="1" t="s">
                <v>1</v>
            </c>
            <c r="C1" s="1" t="s">
                <v>4</v>
            </c>
        </row>
        <row r="2" spans="1:19">
            <c r="A2" t="s">
                <v>2</v>
            </c>
            <c r="B2" t="s">
                <v>3</v>
            </c>
            <c r="C2">
                <v>1</v>
            </c>
        </row>
        <row r="3" spans="1:19">
            <c r="A3" t="s">
                <v>5</v>
            </c>
            <c r="B3" t="s">
                <v>6</v>
            </c>
            <c r="C3">
                <v>4</v>
            </c>
        </row>
        <row r="13" spans="1:19">
            <c r="R13" t="s">
                <v>8</v>
            </c>
            <c r="S13">
                <f>SUM(C2:C3)</f>
                <v>5</v>
            </c>
        </row>
    </sheetData>
    <phoneticPr fontId="1" type="noConversion"/>
    <pageMargins left="0.7" right="0.7" top="0.75" bottom="0.75" header="0.3" footer="0.3"/>
</worksheet>
複製代碼

首先，很開心，數據結構很清楚，大體與html的table、tr、td的結構類似，而且經過row上面的spans來標示每行的數據起始位置。能夠得出如下幾點：

數據結構很清除，大體與HTML中的table、tr、td的結構類似，只不過使用的是sheetData、row、c
經過row的spans屬性來判斷每行的起始位置
經過row的r屬性能夠判斷出來是第幾行，而且須要注意起始行是1，不是程序裏面的0
經過c的r屬性能夠判斷單元格在第幾行第幾列
樣式屬性經過s屬性進行關聯
經過dimension能夠知道表格數據所佔據的總大小
經過sheetViews能夠知道保存時，選中的單元格的位置，打開的表格
自定義行高的時候，會在row上多一個ht屬性，而且customHeight="1"
自定義列寬的時候，會多一個cols標籤，經過其中col來定義自定義的寬度，col中的min和max標示起始列，width標示自定義的寬度
經過pageMargins屬性設置頁面屬性

可是，須要注意一點，文本內容都沒包含在表格中，都是儲存在xl/sharedStrings.xml中，而後在sheet中經過索引進行引用，xl/sharedStrings.xml內容以下：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<sst xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" count="12" uniqueCount="10">
    <si>
        <t>標題</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>姓名</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>你好，將來</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>張三</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>得分</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>明天</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>里斯</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>王五</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>總計</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
    <si>
        <t>時間</t>
        <phoneticPr fontId="1" type="noConversion"/>
    </si>
</sst>
複製代碼