在 Oracle APEX 中集成 SpreadJS

Question

I am new to Oracle APEX, i am using apex version 21.1.0, i just want to upload excel file with password protected, so i have used Spread JS java script plugin, while i am trying to integrate i am getting this below error which attached in screenshot. I am new to Oracle APEX, i am using apex version 21.1.0, i just want to upload excel file with password protected, so i have used Spread JS java script plugin, while i am trying to integrate i am getting this below error which附在屏幕截图中。

I have a Oracle APEX form like below:我有一个 Oracle APEX 表格，如下所示：

I have created one region, and three page items我创建了一个区域和三个页面项

File Upload type - file文件上传类型 - 文件
Password Input type - password密码输入类型 - 密码
Button type - Button按钮类型 - 按钮

The page properties like below:页面属性如下：

I have added the below code in HTML Header我在 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>

Please correct me if i am wrong or missed something.如果我错了或遗漏了什么，请纠正我。

Thanks,谢谢，

Answer 1

I am a Technical Engagement Engineer of GrapeCity supporting SpreadJS.我是支持 SpreadJS 的 GrapeCity 的技术参与工程师。 I wanted to note that SpreadJS, as of the current version (V14.1.0), it is not tested for or uses APEX software.我想指出的是，SpreadJS，从当前版本（V14.1.0）开始，它没有经过测试或使用 APEX 软件。 If you experience any issues please report them to the SpreadJS team here: https://www.grapecity.com/my-account/my-support/如果您遇到任何问题，请在此处向 SpreadJS 团队报告： https://www.grapecity.com/my-account/my-support/

I was able to integrate SpreadJS to an APEX application following these steps:我能够按照以下步骤将 SpreadJS 集成到 APEX 应用程序中：

We must first include SpreadJS JS and CSS files.我们必须首先包含 SpreadJS JS 和 CSS 文件。 When in the App builder select the root element in the tree under the rendering tab, then on the right pane, scroll down through the properties until you find the JavaScript properties section.在应用程序构建器 select 中渲染选项卡下树中的根元素时，然后在右窗格中，向下滚动属性，直到找到JavaScript属性部分。
Under the JavaScript properties include SpreadJS's JS and CSS file urls in the specified areas:在JavaScript属性下指定区域包含SpreadJS的JS和CSS文件url：

Here are the necessary SpreadJS links:以下是必要的 SpreadJS 链接：

JS: JS：

CSS: CSS：

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

Next, create a region named SpreadJS接下来，创建一个名为 SpreadJS 的区域
Within the SpreadJS region, right click, and create the following:在 SpreadJS 区域中，右键单击并创建以下内容：

A File Browser type named P1_UPLOAD_FILE名为P1_UPLOAD_FILE的文件浏览器类型
A Password type item named P1_PASSWORD名为P1_PASSWORD的密码类型项
A Button titled Import with the Static ID being import , the Static ID property can be found under the Advanced properties :一个名为 Import 的按钮，其 Static ID 为import ， Static ID 属性可以在Advanced 属性下找到：

A Sub Region named ss with Static ID set to ss :一个名为 ss 的子区域，其中 Static ID 设置为ss ：

Next, besure to select the root element of the tree and navigate to the JavaScript section in the right pane接下来，确保 select 树的根元素并导航到右侧窗格中的 JavaScript 部分
Initialize SpreadJS under the Function and global variable declaration section.在Function 和全局变量声明部分下初始化 SpreadJS。 Here is a code snippet I used that will display spreadjs to the ss sub region and trigger the importing using the button, file browser, and password:这是我使用的代码片段，它将向 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}); }; }

As I shared previously in my post, please keep in mind that SpreadJS has not been tested within an APEX application so there may be some unexpected behavior.正如我之前在帖子中所分享的，请记住，SpreadJS 尚未在 APEX 应用程序中进行测试，因此可能会出现一些意外行为。 Please reach out to SpreadJS's team if you encounter any issues!如果您遇到任何问题，请联系 SpreadJS 的团队！

Best,最好的，

Mackenzie Albitz |麦肯齐阿尔比兹 | Technical Engagement Engineer at GrapeCity | GrapeCity 技术参与工程师 | SpreadJS传播JS

在 Oracle APEX 中集成 SpreadJS

问题描述

1 个解决方案

解决方案1
0 2021-05-26 19:00:09

在 Oracle APEX 中集成 SpreadJS

问题描述

1 个解决方案

解决方案1 0 2021-05-26 19:00:09

解决方案1
0 2021-05-26 19:00:09