密码保护

SpreadJS文件格式支持使用密码导入和导出xlsx文件。

SpreadJS文件格式支持在导入和导出时使用密码进行加密和解密。 导出示例: 导入示例 GC.Spread.Sheets.IO.ErrorCode定义了不同的错误类型
const $ = selector => document.querySelector(selector); const listen = (host, type, handler) => host.addEventListener(type, handler); window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); const importPassword = $('#importPassword'); const selectBtn = $('#selectBtn'); const fileSelect = $('#selectedFile'); const importBtn = $('#importBtn'); const warningBox = $('#warningBox'); const exportPassword = $('#exportPassword'); const exportBtn = $('#exportBtn'); 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'); }); 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); 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); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <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> </html>
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; }