excel - 在 Oracle APEX 中集成 SpreadJS

Question

我是 Oracle APEX 的新手，我使用的是 apex 版本 21.1.0，我只想上传受密码保护的 excel 文件，所以我使用了 Spread JS java 脚本插件，而我正在尝试集成我得到以下错误附在屏幕截图中。

我有一个如下所示的 Oracle APEX 表格：

我创建了一个区域和三个页面项

文件上传类型 - 文件
密码输入类型 - 密码
按钮类型 - 按钮

页面属性如下：

我在 HTML Header 中添加了以下代码

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://www.grapecity.com/spreadjs/demos/en/purejs /node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/js/license.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/data/excel_data.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("append"),  {calcOnDemand: true});
        spread.fromJSON(jsonData);
        var excelIo = new GC.Spread.Excel.IO();
        document.getElementById('B43349412666678933129').onclick = function () {
            var excelFile = document.getElementById("P2_UPLOAD_FILE").files[0];
            var password = document.getElementById('P2_PASSWORD').value;                                                
            // here is excel IO API
            excelIo.open(excelFile, function (json) {
                var workbookObj = json;                  
                    spread.fromJSON(workbookObj);
            }, function (e) {
                // process error
                alert(e.errorMessage);
                if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
                    document.getElementById('P2_PASSWORD').onselect = null;
                }
            }, {password: password});
        };            
    };
   </script>
  </head>
 <body>
   <div id="append"></div>
 </body>

如果我错了或遗漏了什么，请纠正我。

谢谢，

score 0 · Accepted Answer

我是支持 SpreadJS 的 GrapeCity 的技术参与工程师。我想指出的是，SpreadJS，从当前版本（V14.1.0）开始，它没有经过测试或使用 APEX 软件。如果您遇到任何问题，请在此处向 SpreadJS 团队报告：https ://www.grapecity.com/my-account/my-support/

我能够按照以下步骤将 SpreadJS 集成到 APEX 应用程序中：

我们必须首先包含 SpreadJS JS 和 CSS 文件。在 App builder 中选择呈现选项卡下树中的根元素，然后在右侧窗格中，向下滚动属性，直到找到JavaScript属性部分。
JavaScript属性下的指定区域包括 SpreadJS 的 JS 和 CSS 文件 url：

以下是必要的 SpreadJS 链接：

JS：

CSS：

https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css

接下来，创建一个名为 SpreadJS 的区域
在 SpreadJS 区域中，右键单击并创建以下内容：

名为P1_UPLOAD_FILE的文件浏览器类型
名为P1_PASSWORD的密码类型项
一个名为 Import 的按钮，其静态 ID 为import，静态 ID 属性可以在高级属性下找到：

一个名为 ss 的子区域，其静态 ID 设置为ss：

接下来，确保选择树的根元素并导航到右侧窗格中的 JavaScript 部分
在函数和全局变量声明部分下初始化SpreadJS 。这是我使用的代码片段，它将向 ss 子区域显示 spreadjs 并使用按钮、文件浏览器和密码触发导入：

GC.Spread.Sheets.LicenseKey = "sjs-distribution key";
window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
    var excelIo = new GC.Spread.Excel.IO();
      document.getElementById('import').onclick = function () {
        var excelFile = document.getElementById("P1_UPLOAD_FILE").files[0];
        var password = document.getElementById('P1_PASSWORD').value;
        // here is excel IO API
        excelIo.open(excelFile, function (json) {
            var workbookObj = json;
                spread.fromJSON(workbookObj);
            }
        , function (e) {
            // process error
            alert(e.errorMessage);
            if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
                document.getElementById('password').onselect = null;
            }
        }, {password: password});
    };
}

正如我之前在帖子中所分享的，请记住，SpreadJS 尚未在 APEX 应用程序中进行测试，因此可能会出现一些意外行为。如果您遇到任何问题，请联系 SpreadJS 的团队！

最好的，

麦肯齐阿尔比兹 | GrapeCity 技术参与工程师 | 传播JS

excel - 在 Oracle APEX 中集成 SpreadJS

1 回答 1

Related

Reference