### Complete HTML Example for SpreadJS Designer Setup Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/quick-start-designer This is a complete HTML file demonstrating the integration of SpreadJS and its Designer Component. It includes all necessary CSS and JS file inclusions, the host container, and the initialization script within the `window.onload` event. ```HTML

``` -------------------------------- ### 初始化设计器组件并传递现有电子表格 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spreadjs_designer_component/quick-start-designer 初始化 SpreadJS 设计器组件，并将现有的电子表格实例作为参数传递。这会将设计器功能与您的电子表格数据和 UI 元素关联起来。 ```JavaScript var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread); ``` -------------------------------- ### 初始化设计器组件并传递现有电子表格 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/quick-start-designer 初始化 SpreadJS 设计器组件，并将现有的电子表格实例作为参数传递。这会将设计器功能与您的电子表格数据和 UI 元素关联起来。 ```JavaScript var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread); ``` -------------------------------- ### Install SpreadJS Designer on Linux Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spdesigner/spdesigner-gettingstarted This snippet refers to the file used for installing the SpreadJS Designer on Linux systems. Ensure the SpreadJS ZIP file is downloaded and extracted prior to execution. ```bash SpreadJS-Designer.xxx.AppImage ``` -------------------------------- ### Install SpreadJS Designer on Linux Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spdesigner/spdesigner-gettingstarted This snippet refers to the file used for installing the SpreadJS Designer on Linux systems. Ensure the SpreadJS ZIP file is downloaded and extracted prior to execution. ```bash SpreadJS-Designer.xxx.AppImage ``` -------------------------------- ### 安装项目依赖并启动 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/javascript-frameworks/spreadjs-with-individual-modules/rollup 执行 npm install 来安装所有列出的开发依赖项，然后使用 npm run start 命令来执行 Rollup 打包过程。 ```bash npm install npm run start ``` -------------------------------- ### 完整的 HTML 页面，用于 SpreadJS 和设计器组件集成 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/quick-start-designer 一个完整的 HTML 页面示例，演示了如何集成 SpreadJS 和设计器组件。它包括所有必要的脚本和 CSS 引用、SpreadJS 的初始化、数据设置、图表创建以及设计器组件的集成。 ```HTML

``` -------------------------------- ### 安装项目依赖并启动 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/javascript-frameworks/spreadjs-with-individual-modules/rollup 执行 npm install 来安装所有列出的开发依赖项，然后使用 npm run start 命令来执行 Rollup 打包过程。 ```bash npm install npm run start ``` -------------------------------- ### 构建和运行SpreadJS协同服务器 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/collaboration-server/framework/js-collaboration-ot/real-time-text-editor/tutorial-configure-database-adapter 执行`npm run build`来构建客户端代码，然后运行`npm run start`来启动服务器，最后通过浏览器访问`index.html`进行测试。 ```bash npm run build ``` ```bash npm run start ``` -------------------------------- ### Install SpreadJS Designer on Windows Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spdesigner/spdesigner-gettingstarted This snippet shows the command to install the SpreadJS Designer on a Windows system. It assumes the SpreadJS ZIP file has been downloaded and extracted. ```bash SpreadJS-Designer.xxx.exe ``` -------------------------------- ### Install SpreadJS Designer on Windows Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spdesigner/spdesigner-gettingstarted This snippet shows the command to install the SpreadJS Designer on a Windows system. It assumes the SpreadJS ZIP file has been downloaded and extracted. ```bash SpreadJS-Designer.xxx.exe ``` -------------------------------- ### 构建和运行SpreadJS协同服务器 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/collaboration-server/framework/js-collaboration-ot/real-time-text-editor/tutorial-configure-database-adapter 执行`npm run build`来构建客户端代码，然后运行`npm run start`来启动服务器，最后通过浏览器访问`index.html`进行测试。 ```bash npm run build ``` ```bash npm run start ``` -------------------------------- ### Install SpreadJS Designer on macOS Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spdesigner/spdesigner-gettingstarted This snippet indicates the file used for installing the SpreadJS Designer on macOS. The SpreadJS ZIP file needs to be downloaded and extracted first. ```bash SpreadJS-Designer.xxx.dmg ``` -------------------------------- ### 包含设计器组件的 CSS 和 JS 文件引用 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spreadjs_designer_component/quick-start-designer 在 HTML 文件中包含 SpreadJS 设计器组件所需的 CSS 和 JavaScript 文件引用。这些文件对于组件的样式和功能至关重要。 ```HTML ``` -------------------------------- ### 包含设计器组件的 CSS 和 JS 文件引用 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/quick-start-designer 在 HTML 文件中包含 SpreadJS 设计器组件所需的 CSS 和 JavaScript 文件引用。这些文件对于组件的样式和功能至关重要。 ```HTML ``` -------------------------------- ### Install SpreadJS Designer on macOS Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spdesigner/spdesigner-gettingstarted This snippet indicates the file used for installing the SpreadJS Designer on macOS. The SpreadJS ZIP file needs to be downloaded and extracted first. ```bash SpreadJS-Designer.xxx.dmg ``` -------------------------------- ### Financial Report Example - Template Setup Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/features/reportsheet This example outlines the setup for a financial report template in SpreadJS. It includes defining data tables in the Data Manager, setting up static headers, and configuring data columns with horizontal and vertical expansion using the SUM() function. ```javascript // Define 'Bud' and 'Act' tables in Data Manager // Set up static data in cells A1 and D1 (headers) // Configure data columns for country, year, and period // Use horizontal expansion for country and vertical expansion for period // Apply SUM() function to calculate totals for 'Bud' and 'Act' columns ``` -------------------------------- ### 使用 spreadjs-cli 创建 SpreadJS Demo Source: https://demo.grapecity.com.cn/spreadjs/help/docs/getstarted/quick-start 通过 spreadjs-cli 脚手架工具快速创建基于 SpreadJS 的在线类 Excel 应用 Demo。支持 Vue2/Vue3/React 多种原型版本，并可选择是否包含表格编辑器插件。 ```bash npm install -g spreadjs-cli ``` ```bash spreadjs-cli create my-first-demo ``` ```bash npm spreadjs-cli create my-first-demo ``` ```bash cd my-first-demo npm run start ``` -------------------------------- ### Financial Report Example - Template Setup Source: https://demo.grapecity.com.cn/spreadjs/help/docs/features/reportsheet This example outlines the setup for a financial report template in SpreadJS. It includes defining data tables in the Data Manager, setting up static headers, and configuring data columns with horizontal and vertical expansion using the SUM() function. ```javascript // Define 'Bud' and 'Act' tables in Data Manager // Set up static data in cells A1 and D1 (headers) // Configure data columns for country, year, and period // Use horizontal expansion for country and vertical expansion for period // Apply SUM() function to calculate totals for 'Bud' and 'Act' columns ``` -------------------------------- ### 执行数据库初始化脚本 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/collaboration-server/framework/js-collaboration-ot/real-time-text-editor/tutorial-configure-database-adapter 使用Node.js执行`init-database.js`脚本，创建必要的数据库表以支持协同数据。 ```bash node init-database.js ``` -------------------------------- ### Apply SpreadJS and Designer License Keys Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spreadjs_designer_component/getting-started-designer Demonstrates how to set the license keys for both SpreadJS and the SpreadJS Designer Component before initializing the designer instance. This is crucial for enabling full functionality, especially in production environments. ```JavaScript GC.Spread.Sheets.LicenseKey = "xxxx"; GC.Spread.Sheets.Designer.LicenseKey = "xxxx"; var designer = new GC.Spread.Sheets.Designer("designerHost"); ``` -------------------------------- ### Sales Report Example - Template Setup Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/features/reportsheet This example describes the template setup for a sales report in SpreadJS. It involves defining a sales table in the Data Manager, setting up headers, and configuring data columns for region, salesperson, product, and sales details, using the SUM() function for total sales. ```javascript // Define sales table in Data Manager // Set up headers in the template worksheet // Configure data columns for region, salesperson name, product, and sales details // Use SUM() function to calculate total sales for the 'Sales' column ``` -------------------------------- ### Apply SpreadJS and Designer License Keys Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/getting-started-designer Demonstrates how to set the license keys for both SpreadJS and the SpreadJS Designer Component before initializing the designer instance. This is crucial for enabling full functionality, especially when deploying to a web server. ```JavaScript GC.Spread.Sheets.LicenseKey = "xxxx"; GC.Spread.Sheets.Designer.LicenseKey = "xxxx"; var designer = new GC.Spread.Sheets.Designer("designerHost"); ``` -------------------------------- ### Sales Report Example - Template Setup Source: https://demo.grapecity.com.cn/spreadjs/help/docs/features/reportsheet This example describes the template setup for a sales report in SpreadJS. It involves defining a sales table in the Data Manager, setting up headers, and configuring data columns for region, salesperson, product, and sales details, using the SUM() function for total sales. ```javascript // Define sales table in Data Manager // Set up headers in the template worksheet // Configure data columns for region, salesperson name, product, and sales details // Use SUM() function to calculate total sales for the 'Sales' column ``` -------------------------------- ### Build and Run Project Commands Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-permissions These commands are used to build the client-side code and start the server for the SpreadJS collaboration project. Ensure you have Node.js and npm installed. ```Shell npm run build ``` ```Shell npm run start ``` -------------------------------- ### SpreadJS SJS.AI.QUERY Example: Get Capitals Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/features/ai-assistant/ai-functions/sjsaiquery An example demonstrating how to use the SJS.AI.QUERY function to retrieve the capital cities for a list of countries provided in a cell range. ```SpreadJS Formula =SJS.AI.QUERY("获取这些国家的首都", A2:A11) ``` -------------------------------- ### 执行数据库初始化脚本 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/collaboration-server/framework/js-collaboration-ot/real-time-text-editor/tutorial-configure-database-adapter 使用Node.js执行`init-database.js`脚本，创建必要的数据库表以支持协同数据。 ```bash node init-database.js ``` -------------------------------- ### Build and Run Project Commands Source: https://demo.grapecity.com.cn/spreadjs/help/docs/collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-permissions These commands are used to build the client-side code and start the server for the SpreadJS collaboration project. Ensure you have Node.js and npm installed. ```Shell npm run build ``` ```Shell npm run start ``` -------------------------------- ### SpreadJS EDATE Function Syntax and Examples Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/formulareference/FormulaFunctions/date-time-functions/EDATE Demonstrates the syntax and provides examples for using the EDATE function in SpreadJS. The function calculates a date that is a specified number of months before or after a given start date. ```SpreadJS EDATE(startdate, months) ``` ```SpreadJS EDATE(A1, -6) ``` ```SpreadJS EDATE(R1C1, 4) ``` ```SpreadJS EDATE("2004/01/09", 2) ``` -------------------------------- ### 完整的 HTML 页面，用于 SpreadJS 和设计器组件集成 Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spreadjs_designer_component/quick-start-designer 一个完整的 HTML 页面示例，演示了如何集成 SpreadJS 和设计器组件。它包括所有必要的脚本和 CSS 引用、SpreadJS 的初始化、数据设置、图表创建以及设计器组件的集成。 ```HTML

``` -------------------------------- ### SpreadJS EDATE Function Syntax and Examples Source: https://demo.grapecity.com.cn/spreadjs/help/docs/formulareference/FormulaFunctions/date-time-functions/EDATE Demonstrates the syntax and provides examples for using the EDATE function in SpreadJS. The function calculates a date that is a specified number of months before or after a given start date. ```SpreadJS EDATE(startdate, months) ``` ```SpreadJS EDATE(A1, -6) ``` ```SpreadJS EDATE(R1C1, 4) ``` ```SpreadJS EDATE("2004/01/09", 2) ``` -------------------------------- ### HTML Structure for SpreadJS Designer Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/quick-start-designer This snippet shows the basic HTML structure required to host the SpreadJS Designer Component. It includes meta tags, jQuery, and placeholders for SpreadJS and Designer Component CSS and JS files. ```HTML ``` -------------------------------- ### Start Server Source: https://demo.grapecity.com.cn/spreadjs/help/docs/collaboration-server/framework/js-collaboration/chat-room This command initiates the server process for the chat application. It ensures the backend is running and ready to handle client connections and messages. ```bash npm run start ``` -------------------------------- ### SpreadJS SJS.AI.QUERY Example: Get Capitals Source: https://demo.grapecity.com.cn/spreadjs/help/docs/features/ai-assistant/ai-functions/sjsaiquery An example demonstrating how to use the SJS.AI.QUERY function to retrieve the capital cities for a list of countries. The function processes a prompt and a range of cells containing country names. ```SpreadJS Formula =SJS.AI.QUERY("获取这些国家的首都", A2:A11) ``` -------------------------------- ### Run Vue Application Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/spreadjs_designer_component/designer-javaScript-frameworks/designer-vue Command to start the development server for the Vue application. ```bash npm run dev ``` -------------------------------- ### Start Server with npm Source: https://demo.grapecity.com.cn/spreadjs/help/docs/collaboration-server/framework/js-collaboration-ot/real-time-text-editor This command starts the development server, which is necessary for testing the real-time collaboration functionality. The server will be accessible at http://localhost:8080. ```Shell npm run start ``` -------------------------------- ### Run Vue Application Source: https://demo.grapecity.com.cn/spreadjs/help/docs/spreadjs_designer_component/designer-javaScript-frameworks/designer-vue Command to start the development server for the Vue application. ```bash npm run dev ``` -------------------------------- ### SpreadJS YEARFRAC Function Example Source: https://demo.grapecity.com.cn/spreadjs/help/docs/v18.1/formulareference/FormulaFunctions/date-time-functions/YEARFRAC This example demonstrates how to use the YEARFRAC function in SpreadJS to calculate the fraction of a year between two dates. It shows the basic syntax with cell references for start date, end date, and basis. ```SpreadJS YEARFRAC(A1,A2,A3) ``` -------------------------------- ### SpreadJS YEARFRAC Function Example Source: https://demo.grapecity.com.cn/spreadjs/help/docs/formulareference/FormulaFunctions/date-time-functions/YEARFRAC This example demonstrates how to use the YEARFRAC function in SpreadJS to calculate the fraction of a year between two dates. It shows the basic syntax with cell references for start date, end date, and basis. ```SpreadJS YEARFRAC(A1,A2,A3) ```