• 如何将 JavaScript Excel XLSX 查看器添加到Web应用程序

    在 JavaScript 中创建 Excel 查看器可能是一项艰巨的任务，但使用 SpreadJS JavaScript 电子表格，创建过程要简单得多。在本教程博客中，我们将向您展示如何使用 SpreadJS 的强大功能来创建一个查看器，该查看器允许您在 Web 浏览器中打开和保存 Excel 文件，以及保护工作表不被编辑并添加密码。要继续阅读此博客，请务必下载示例---内容转载来自官方网站。

    SpreadJS 入门---JS已经Crack--请关注

    该项目将由三个文件组成：HTML、JavaScript 文件和 CSS 文件。我们可以首先将 SpreadJS 合并到我们的项目中。您可以通过几种不同的方式来做到这一点：

    参考本地文件

    SpreadJS 可以从我们的网站下载并导入到应用程序中：GrapeCity, Inc.下载后，我们可以提取该 ZIP 文件并将 JS 和 CSS 文件复制到我们的应用程序中，特别是这些文件：

    • gc.spread.sheets.all.xx.xxmin.js
    • gc.spread.sheets.io.xx.xxmin.js
    • gc.spread.sheets.excel2013white.xx.xxcss

    一旦我们将它们放入应用程序的文件夹中，我们就可以在代码中引用它们：

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

    参考NPM

    引用 SpreadJS 的另一种方法是通过 NPM 文件。可以使用以下命令将它们添加到应用程序中：

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

    然后，我们可以在代码中引用这些文件：

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

    创建 HTML 内容

    一旦引用了这些文件，我们就可以组合 HTML 页面和 CSS 样式。对于样式，我已经提前创建了样式：

    1. body {
    2.     position: absolute;
    3.     top: 0;
    4.     bottom: 0;
    5.     left: 0;
    6.     right: 0;
    7. }
    8.  
    9. .sample-tutorial {
    10.     position: relative;
    11.     height: 100%;
    12.     overflow: hidden;
    13. }
    14.  
    15. .sample-container {
    16.     width: calc(100% - 280px);
    17.     height: 100%;
    18.     float: left;
    19. }
    20.  
    21. .sample-spreadsheets {
    22.     width: 100%;
    23.     height: calc(100% - 25px);
    24.     overflow: hidden;
    25. }
    26.  
    27. .options-container {
    28.     float: right;
    29.     width: 280px;
    30.     height: 100%;
    31.     box-sizing: border-box;
    32.     background: #fbfbfb;
    33.     overflow: auto;
    34. }
    35.  
    36. .sample-options {
    37.     z-index: 1000;
    38. }
    39.  
    40. .inputContainer {
    41.     width: 100%;
    42.     height: auto;
    43.     border: 1px solid #eee;
    44.     padding: 6px 12px;
    45.     margin-bottom: 10px;
    46.     box-sizing: border-box;
    47. }
    48.  
    49. .settingButton {
    50.     color: #fff;
    51.     background: #82bc00;
    52.     outline: 0;
    53.     line-height: 1.5715;
    54.     position: relative;
    55.     display: inline-block;
    56.     font-weight: 400;
    57.     white-space: nowrap;
    58.     text-align: center;
    59.     height: 32px;
    60.     padding: 4px 15px;
    61.     font-size: 14px;
    62.     border-radius: 2px;
    63.     user-select: none;
    64.     cursor: pointer;
    65.     border: 1px solid #82bc00;
    66.     box-sizing: border-box;
    67.     margin-bottom: 10px;
    68.     margin-top: 10px;
    69. }
    70.  
    71. .settingButton:hover {
    72.     color: #fff;
    73.     border-color: #88b031;
    74.     background: #88b031;
    75. }
    76.  
    77. .settingButton:disabled {
    78.     background: #e2dfdf;
    79.     border-color: #ffffff;
    80. }
    81.  
    82. .options-title {
    83.     font-weight: bold;
    84.     margin: 4px 2px;
    85. }
    86.  
    87. #selectedFile {
    88.     display: none;
    89. }
    90.  
    91. select, input[type="text"], input[type="number"] {
    92.     display: inline-block;
    93.     margin-left: auto;
    94.     width: 120px;
    95.     font-weight: 400;
    96.     outline: 0;
    97.     line-height: 1.5715;
    98.     border-radius: 2px;
    99.     border: 1px solid #F4F8EB;
    100.     box-sizing: border-box;
    101. }
    102.  
    103. .passwordIpt {
    104.     margin-top: 10px;
    105.     height: 25px;
    106. }
    107.  
    108. .passwordIpt[warning="true"] {
    109.     border-color: red;
    110. }
    111.  
    112. .passwordIpt[warning="true"]::placeholder {
    113.     color: red;
    114.     opacity: 0.8;
    115. }
    116.  
    117. @keyframes shake {
    118.     0% { transform: translate(1px, 1px) rotate(0deg); }
    119.     10% { transform: translate(-1px, -2px) rotate(-1deg); }
    120.     20% { transform: translate(-3px, 0px) rotate(1deg); }
    121.     30% { transform: translate(3px, 2px) rotate(0deg); }
    122.     40% { transform: translate(1px, -1px) rotate(1deg); }
    123.     50% { transform: translate(-1px, 2px) rotate(-1deg); }
    124.     60% { transform: translate(-3px, 1px) rotate(0deg); }
    125.     70% { transform: translate(3px, 1px) rotate(-1deg); }
    126.     80% { transform: translate(-1px, -1px) rotate(1deg); }
    127.     90% { transform: translate(1px, 2px) rotate(0deg); }
    128.     100% { transform: translate(1px, 1px) rotate(0deg); }
    129. }
    130.  
    131. #warningBox {
    132.     color: red;
    133. }

    然后，我们可以添加此应用程序所需的所有按钮和 UI，其中包括：

    • SpreadJS 实例
    • 状态栏
    • 进口部分
      • 密码文本框
      • 文件选择按钮
      • 导入按钮
    • 出口部分
      • 密码文本框
      • 导出按钮

    当我们将每个元素添加到 HTML 正文部分时，我们可以为每个元素使用适当的样式：

    1. <body>
    2.     <div class="sample-tutorial">
    3.         <div class="sample-container">
    4.             <div id="ss" class="sample-spreadsheets"></div>
    5.             <div id="statusBar"></div>
    6.         </div>
    7.         <div class="options-container">
    8.             <div class="option-row">
    9.                 <div class="inputContainer">
    10.                     <div class="options-title">Import:</div>
    11.                     <input class="passwordIpt" id="importPassword" type="password" placeholder="Password" disabled>
    12.                     <br>
    13.                     <div id="warningBox"></div>
    14.                     <input id="selectedFile" type="file" accept=".xlsx" />
    15.                     <button class="settingButton" id="selectBtn">Select</button>
    16.                     <button class="settingButton" id="importBtn" disabled>Import</button>
    17.                 </div>
    18.                 <div class="inputContainer">
    19.                     <div class="options-title">Export:</div>
    20.                     <input class="passwordIpt" id="exportPassword" type="password" placeholder="Password">
    21.                     <br>
    22.                     <button class="settingButton" id="exportBtn">Export</button>
    23.                 </div>
    24.             </div>
    25.         </div>
    26.     </div>
    27. </body>
    复制

    初始化 SpreadJS

    现在我们已经引用了文件并设置了 HTML 内容，我们可以初始化 SpreadJS 实例并准备在 app.js 文件中添加 Excel 导入代码。我们可以将其放在窗口的 onload 函数中：

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

    添加按钮和功能

    出于此应用程序的目的，我们还可以通过创建一些变量来使编写更容易，这些变量可用于我们在 window.onload 函数之前创建的 UI：

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

    现在，我们可以更轻松地创建变量来引用 window.onload 函数内的不同 HTML 元素：

    1. const importPassword = $('#importPassword');
    2. const selectBtn = $('#selectBtn');
    3. const fileSelect = $('#selectedFile');
    4. const importBtn = $('#importBtn');
    5. const warningBox = $('#warningBox');
    6. const exportPassword = $('#exportPassword');
    7. const exportBtn = $('#exportBtn');

    我们现在可以为文件选择按钮和密码文本框添加事件侦听器和函数，以及错误密码消息的处理程序：

    1. listen(selectBtn, "click", () => fileSelect.click());
    2.  
    3. const fileSelectedHandler = () => {
    4.     importPassword.disabled = false;
    5.     importBtn.disabled = false;
    6. }
    7.  
    8. listen(fileSelect, 'change', fileSelectedHandler);
    9.  
    10. const wrongPasswordHandler = message => {
    11.     importPassword.setAttribute('warning', true);
    12.     importPassword.style.animation = "shake 0.5s";
    13.     setTimeout(() => importPassword.style.animation = "", 500);
    14.     warningBox.innerText = message;
    15.     importPassword.value = '';
    16. };
    17.  
    18. listen(importPassword, 'focus', () => {
    19.     warningBox.innerText = '';
    20.     importPassword.removeAttribute('warning');
    21. });

    将 Excel 文件导入 SpreadJS

    现在，我们可以添加代码以将 Excel 文件导入到 SpreadJS 实例中。由于我们可能会导入受密码保护的文件，因此在调用 SpreadJS导入函数时需要考虑到这一点。我们还可以在编写函数后添加事件处理程序：

    1. const importFileHandler = () => {
    2.     let file = fileSelect.files[0];
    3.     if (!file) return ;
    4.     spread.import(file, console.log, error => {
    5.         if (error.errorCode === GC.Spread.Sheets.IO.ErrorCode.noPassword || error.errorCode === GC.Spread.Sheets.IO.ErrorCode.invalidPassword) {
    6.             wrongPasswordHandler(error.errorMessage);
    7.         }
    8.     }, {
    9.         fileType: GC.Spread.Sheets.FileType.excel,
    10.         password: importPassword.value
    11.     });
    12. };
    13. listen(importBtn, 'click', importFileHandler);

    从 SpreadJS 导出 Excel 文件

    与导入类似，我们导出时可以支持用户输入密码添加到Excel文件中，所以我们只需要在SpreadJS导出函数中传入密码即可。我们还将为此添加一个事件处理程序：

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

    保护数据

    我们还可以保护数据以防止用户更改它。为此，我们可以添加一个按钮来保护工作簿的当前工作表。可以对其进行更改以满足任何类型的要求，但对于本示例而言，这将是活动工作表。与其他按钮类似，我们需要添加一个处理程序来单击它，但使用 SpreadJS，我们还可以指定保护选项：

    1. const protectHandler = () => {
    2.     var option = {
    3.         allowSelectLockedCells:true,
    4.         allowSelectUnlockedCells:true,
    5.         allowFilter: true,
    6.         allowSort: false,
    7.         allowResizeRows: true,
    8.         allowResizeColumns: false,
    9.         allowEditObjects: false,
    10.         allowDragInsertRows: false,
    11.         allowDragInsertColumns: false,
    12.         allowInsertRows: false,
    13.         allowInsertColumns: false,
    14.         allowDeleteRows: false,
    15.         allowDeleteColumns: false,
    16.         allowOutlineColumns: false,
    17.         allowOutlineRows: false
    18.     };
    19.     spread.getSheet(0).options.protectionOptions = option;
    20.     spread.getSheet(0).options.isProtected = true;
    21. };
    22. listen(protectBtn, 'click', protectHandler);
    复制

    运行应用程序

    现在剩下的就是运行该应用程序。由于我们是使用 PureJS 和 HTML 制作的，因此我们可以简单地在 Web 浏览器中打开 HTML 文件：

    JavaScript Excel XLSX 查看器

    我们可以点击“选择”按钮选择要加载的Excel文件，然后点击“导入”按钮将其导入到SpreadJS中：

    JavaScript Excel XLSX 查看器

    现在我们可以通过在导出下的密码文本框中输入密码来添加密码，然后单击“导出”按钮：

    JavaScript Excel XLSX 查看器

    您现在已经使用 SpreadJS 制作了自己的 Excel 查看器！有了它，您可以在导出 Excel 文件之前打开、保护 Excel 文件并为其添加密码，只需几个简单的步骤即可完成。

  • 相关阅读:
    Scala基础
    dreamweaver作业静态HTML网页设计——我的家乡海南旅游网站
    golang闭包
    海思3559AV100 gdb+gdbserver调试·基础篇
    常用安全产品系统默认口令
    【C++进阶之路】特殊类的设计
    通俗易懂VAE变分自编码器
    五、WebGPU Vertex Buffers 顶点缓冲区
    Java反射获取内部类方法
    【代码随想录】刷题笔记Day33
  • 原文地址：https://blog.csdn.net/john_dwh/article/details/132962541