JavaScript使用SpreadJS創(chuàng)建Excel查看器

更新時(shí)間：2023年12月07日 10:56:04 作者：葡萄城官網(wǎng)

在現(xiàn)代的Web應(yīng)用開發(fā)中,Excel文件的處理和展示是一項(xiàng)常見的需求,小編今天將為大家展示如何借助SpreadJS來創(chuàng)建一個(gè)Excel查看器,感興趣的小伙伴可以了解下

前言

在現(xiàn)代的Web應(yīng)用開發(fā)中，Excel文件的處理和展示是一項(xiàng)常見的需求。為了提供更好的用戶體驗(yàn)和功能，經(jīng)常需要在Web應(yīng)用中添加一個(gè)JavaScript Excel查看器，小編今天將為大家展示如何借助葡萄城公司的純前端表格控件——SpreadJS來創(chuàng)建一個(gè)Excel查看器。

項(xiàng)目結(jié)構(gòu)

本項(xiàng)目將由三個(gè)文件構(gòu)成：一個(gè)HTML文件、一個(gè)JavaScript文件以及一個(gè)CSS文件。

1.引入SpreadJS

（1）本地文件引入

SpreadJS可以從我們的網(wǎng)站下載并導(dǎo)入到程序中。下載后，我們可以解壓ZIP包并將JS和CSS文件復(fù)制到代碼包中，特別是這些文件。

gc.spread.sheets.all.xx.x.x.min.js
gc.spread.sheets.io.xx.x.x.min.js
gc.spread.sheets.excel2013white.xx.x.x.css

將它們放入我們程序的文件夾后，我們可以在代碼中引用它們：

<link rel="stylesheet" type="text/css" href="./styles/gc.spread.sheets.excel2013white.css" rel="external nofollow" >
<script src="./scripts/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="./scripts/gc.spread.sheets.io.min.js" type="text/javascript"></script>

下載的示例中，默認(rèn)就是這種方式，不需要作出修改。

（2）NPM引用

另一種方式是通過NPM的方式有引用SpreadJS。可以用如下命令安裝依賴：

npm install @grapecity/spread-sheets @grapecity/spread-sheets-io @grapecity/spread-sheets-charts @grapecity/spread-sheets-shapes

然后，就可以在代碼中這樣引用這些文件：

<link rel= "stylesheet" type= "text/css" href= "./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" > 
<script src="./node_modules/ @grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> 
<script src="./node_modules/@grapecity/spread-sheets-io /dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> 
<script src="./node_modules/@grapecity/spread-sheets-charts/dist/gc.spread .sheets.charts.min.js" type="text/javascript"></script> 
<script src="./node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min .js" type="text/javascript"></script>

2.創(chuàng)建HTML內(nèi)容

一旦引用了這些文件，我們就可以組合HTML頁面和CSS樣式。對(duì)于樣式，已經(jīng)提前創(chuàng)建好了：

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sample-container {
    width: calc(100% - 280px);
    height: 100%;
    float: left;
}

.sample-spreadsheets {
    width: 100%;
    height: calc(100% - 25px);
    overflow: hidden;
}

.options-container {
    float: right;
    width: 280px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
}

.sample-options {
    z-index: 1000;
}

.inputContainer {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    padding: 6px 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.settingButton {
    color: #fff;
    background: #82bc00;
    outline: 0;
    line-height: 1.5715;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    height: 32px;
    padding: 4px 15px;
    font-size: 14px;
    border-radius: 2px;
    user-select: none;
    cursor: pointer;
    border: 1px solid #82bc00;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-top: 10px;
}

.settingButton:hover {
    color: #fff;
    border-color: #88b031;
    background: #88b031;
}

.settingButton:disabled {
    background: #e2dfdf;
    border-color: #ffffff;
}

.options-title {
    font-weight: bold;
    margin: 4px 2px;
}

#selectedFile {
    display: none;
}

select, input[type="text"], input[type="number"] {
    display: inline-block;
    margin-left: auto;
    width: 120px;
    font-weight: 400;
    outline: 0;
    line-height: 1.5715;
    border-radius: 2px;
    border: 1px solid #F4F8EB;
    box-sizing: border-box;
}

.passwordIpt {
    margin-top: 10px;
    height: 25px;
}

.passwordIpt[warning="true"] {
    border-color: red;
}

.passwordIpt[warning="true"]::placeholder {
    color: red;
    opacity: 0.8;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, 1px) rotate(0deg); }
}

#warningBox {
    color: red;
}

接下來，我們可以添加這個(gè)網(wǎng)頁需要的按鈕和UI，主要包括：

SpreadJS的容器
狀態(tài)欄
導(dǎo)入?yún)^(qū)域
密碼輸入框
文件選擇按鈕
導(dǎo)入按鈕
導(dǎo)出區(qū)域
密碼輸入框
導(dǎo)出按鈕

添加HTML標(biāo)簽時(shí)，我們可以對(duì)每個(gè)元素使用合適的樣式：

<body>
    <div class="sample-tutorial">
        <div class="sample-container">
            <div id="ss" class="sample-spreadsheets"></div>
            <div id="statusBar"></div>
        </div>
        <div class="options-container">
            <div class="option-row">
                <div class="inputContainer">
                    <div class="options-title">Import:</div>
                    <input class="passwordIpt" id="importPassword" type="password" placeholder="Password" disabled>
                    <br>
                    <div id="warningBox"></div>
                    <input id="selectedFile" type="file" accept=".xlsx" />
                    <button class="settingButton" id="selectBtn">Select</button>
                    <button class="settingButton" id="importBtn" disabled>Import</button>
                </div>
                <div class="inputContainer">
                    <div class="options-title">Export:</div>
                    <input class="passwordIpt" id="exportPassword" type="password" placeholder="Password">
                    <br>
                    <button class="settingButton" id="exportBtn">Export</button>
                </div>
            </div>
        </div>
    </div>
</body>

3.初始化

現(xiàn)在已經(jīng)準(zhǔn)備好了HTML內(nèi)容和SpreadJS引用，可以開始初始化SpreadJS實(shí)例并在app.js文件中添加Excel導(dǎo)入的代碼了。

window.onload = function () {
  let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}

4.添加按鈕和功能

為了實(shí)現(xiàn)這個(gè)應(yīng)用的目標(biāo)，可以添加以下變量：

const $ = selector => document.querySelector(selector);
const listen = (host, type, handler) => host.addEventListener(type, handler);

在window.onload函數(shù)中創(chuàng)建變量，引用不同的HTML元素：

const importPassword = $('#importPassword');
const selectBtn = $('#selectBtn');
const fileSelect = $('#selectedFile');
const importBtn = $('#importBtn');
const warningBox = $('#warningBox');
const exportPassword = $('#exportPassword');
const exportBtn = $('#exportBtn');

為文件選擇按鈕和按鈕輸入框添加事件和監(jiān)聽函數(shù)以及密碼錯(cuò)誤的提示：

listen(selectBtn, "click", () => fileSelect.click());

const fileSelectedHandler = () => {
    importPassword.disabled = false;
    importBtn.disabled = false;
}

listen(fileSelect, 'change', fileSelectedHandler);

const wrongPasswordHandler = message => {
    importPassword.setAttribute('warning', true);
    importPassword.style.animation = "shake 0.5s";
    setTimeout(() => importPassword.style.animation = "", 500);
    warningBox.innerText = message;
    importPassword.value = '';
};

listen(importPassword, 'focus', () => {
    warningBox.innerText = '';
    importPassword.removeAttribute('warning');
});

5.導(dǎo)入Excel文件

現(xiàn)在可以寫導(dǎo)入Excel文件到SpreadJS實(shí)例的代碼了。因?yàn)槲覀兛赡軙?huì)導(dǎo)入被密碼保護(hù)的文件，因此在調(diào)用SpreadJS的import函數(shù)時(shí)需要考慮到這一點(diǎn)。我們可以在寫import時(shí)添加事件處理程序：

const importFileHandler = () => {
    let file = fileSelect.files[0];
    if (!file) return ;
    spread.import(file, console.log, error => {
        if (error.errorCode === GC.Spread.Sheets.IO.ErrorCode.noPassword || error.errorCode === GC.Spread.Sheets.IO.ErrorCode.invalidPassword) {
            wrongPasswordHandler(error.errorMessage);
        }
    }, {
        fileType: GC.Spread.Sheets.FileType.excel,
        password: importPassword.value
    });
};
listen(importBtn, 'click', importFileHandler);

6.導(dǎo)出Excel文件

與導(dǎo)入類似，我們可以支持用戶在導(dǎo)出Excel時(shí)輸入保護(hù)密碼，所以我們只需要將密碼傳入SpreadJS的export函數(shù)。我們同樣為它添加事件處理程序：

const exportFileHandler = () => {
    let password = exportPassword.value;
    spread.export(blob => saveAs(blob, (password ? 'encrypted-' : '') + 'export.xlsx'), console.log, {
        fileType: GC.Spread.Sheets.FileType.excel,
        password: password
    });
};
listen(exportBtn, 'click', exportFileHandler);

7.數(shù)據(jù)保護(hù)

我們同樣可以保護(hù)數(shù)據(jù)，阻止用戶改變它。為了實(shí)現(xiàn)這一點(diǎn)，我們可以添加一個(gè)按鈕來保護(hù)工作簿當(dāng)前的表單。稍作修改，此功能就可以適配于多種不同的需求，但對(duì)于此示例，我們僅保護(hù)活動(dòng)表單。與其他按鈕類似，我們需要添加點(diǎn)擊按鈕的事件處理程序，對(duì)于SpreadJS，我們可以添加保護(hù)的選項(xiàng)：

const protectHandler = () => {
    var option = {
        allowSelectLockedCells:true,
        allowSelectUnlockedCells:true,
        allowFilter: true,
        allowSort: false,
        allowResizeRows: true,
        allowResizeColumns: false,
        allowEditObjects: false,
        allowDragInsertRows: false,
        allowDragInsertColumns: false,
        allowInsertRows: false,
        allowInsertColumns: false,
        allowDeleteRows: false,
        allowDeleteColumns: false,
        allowOutlineColumns: false,
        allowOutlineRows: false
    };
    spread.getActiveSheet().options.protectionOptions = option;
    spread.getActiveSheet().options.isProtected = true;
};
listen(protectBtn, 'click', protectHandler);