¶ What is WEBSHEET
Websheet is a pure front-end xlsx file display control developed based on HTML5 CANVAS and JAVASCRIPT. This control focuses on page display and mainly implements functions including file import/export, text display, formatted text, merged cells, borders, background colors, setting row/column width/height, hiding rows/columns, view locking, basic tables, undo/redo, keyboard shortcuts, formula parsing and calculation. It supports custom functions, cell display/editing, and right-click menu customization.
¶ 1. Getting Started
If you're new to Websheet, you can start with the following two articles. These will teach you how to load Websheet in pure HTML and VUE, how to render the control on your page, and how to load local or online EXCEL files. You can also see complete, usable examples at the demo address.
Currently supported shortcuts
| Shortcut | Function | Shortcut | Function |
|---|---|---|---|
| Ctrl+O | Open new file | Ctrl+X | Cut |
| Ctrl+C | Copy | Ctrl+P | Paste |
| Ctrl+Z | Undo | Ctrl+Y | Redo |
| Ctrl+A | Select All | Delete | Clear cell value |
| Ctrl+Shitf+PageDown | Activate next sheet | Ctrl+Shitf+PageUp | Activate previous sheet |
| Ctrl+↑ | View switches to sheet start row | Ctrl+↓ | View switches to sheet end row |
| Ctrl+← | View switches to sheet start column | Ctrl+→ | View switches to sheet end column |
| Enter | Confirm edit and move to next cell | Alt+Mouse Wheel | Move table left/right |
¶ 2. Intermediate
If you're already familiar with the control and want to dynamically control some of its functions in your project using scripts, you can learn about the following content. These sections will cover how to set cells, add/delete rows/columns, set row/column height/width, listen to Websheet events, and use supported functions.
| Cells | Formatting | Columns & Rows |
|---|
| Sheet Operations | View Freeze | Name Management |
|---|
| Table Management | Editor |
|---|
Upcoming features and development order:
Currently supported common functions:
| Function | Description | Example |
|---|---|---|
| SUM | Sum function | Sum values from A1 to C1: SUM(A1:C1) |
| IF | Conditional function | IF(10>5,"Yes","No") |
| CONCATENATE | Concatenation function | CONCATENATE(text1,text2,[text3],...) |
| NOW | Current system date/time function | Reference: DateTime Formatting |
| TRUNC | Truncation function | TRUNC(3.141593) // returns 3 |
Currently supported common events are listed below. For event binding, refer to: Event Binding:
| Event | Description | Binding Link |
|---|---|---|
| ActiveCellChange | Triggered when active cell changes | Event Binding |
| SheetChange | Triggered when active sheet changes | Event Binding |
| CellValueChage | Triggered when cell value changes | Event Binding |
| RowChange | Triggered when rows are added/deleted | Event Binding |
| ColChange | Triggered when columns are added/deleted | Event Binding |
| DocumentChange | Triggered when file loading completes | Event Binding |
¶ 3. Advanced
This section allows you to extend Websheet's functionality, such as displaying your controls within Websheet, using your custom functions, and customizing the right-click menu in interactions.
¶ 4. Online Code
All demo code and display address: Demo
¶ 5. About Copyright
Commercial use is prohibited without permission.
¶ 6. Contact Us
Email: 11627685@qq.com
QQ Group: 1036131666
