Front-end table data copying method, electronic equipment and storage medium

Abstract

The invention provides a front-end table data copying method, electronic equipment and a storage medium, and relates to the technical field of table data processing. The method comprises the following steps: determining a corresponding current selected area in response to a cell selection operation of a user in a front-end table; obtaining coordinate information of the current selected area; coordinate information; and according to the coordinate information, acquiring data of each cell in the current selected area from a data source corresponding to the front-end table, performing formatting processing to obtain formatted data of each cell, and writing the formatted data into a system clipboard for pasting to an external tool. According to the method, the coordinate information of the current selected area corresponding to the cell selection operation of the user in the front-end table is determined, so that the data of each cell in the current selected area is obtained according to the coordinate information, and the formatted data obtained after formatting processing is written into the system clipboard; therefore, the table compatibility and the cross-platform adaptability during front-end table data copying are enhanced, and the data copying efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of tabular data processing technology, and in particular to a front-end tabular data copying method, electronic device, and storage medium. Background Technology

[0002] A front-end spreadsheet is an interactive component used in web pages to display structured data, commonly found in enterprise management and data analysis systems. When using data in a front-end spreadsheet, users sometimes need to copy the data to external tools (such as Excel documents) for further processing. This process involves multiple technical steps, including cell positioning, selection range management, data extraction, format conversion, and clipboard writing.

[0003] Current front-end table data copying solutions typically rely on native browser events (such as clicks and key presses) and DOM (Document Object Model) operations. They record coordinates by listening to cell click events and perform copying operations based on document.execCommand (a method for executing document-level commands in the browser environment) or the Clipboard API (an official standard for browser clipboard manipulation); or they use third-party table plugins or libraries (such as xlsx.js) for data export.

[0004] However, in practical applications, users often need to perform operations such as batch selection of table data, cross-tool / cross-platform copying, and dynamic table adaptation. Current front-end table data copying solutions often only adapt to a single front-end framework version and cannot adapt to both static and dynamic tables at the same time. Furthermore, cross-platform copying and pasting may fail due to incompatibility. It is evident that the current front-end table data copying solutions have poor table compatibility, insufficient cross-platform adaptability, and low data copying efficiency. Summary of the Invention

[0005] The main purpose of this application is to propose a front-end table data copying method, electronic device, and storage medium, which aims to enhance table compatibility and cross-platform adaptability during front-end table data copying and improve data copying efficiency.

[0006] In a first aspect, the present invention provides a method for copying front-end table data, comprising: In response to a user's cell selection operation in the front-end table, determine the currently selected area corresponding to the cell selection operation; Obtain the coordinate information of the currently selected area; the coordinate information is used to indicate the table range of the currently selected area in the front-end table; Based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table; The data in each cell is formatted to obtain the formatted data for each cell; The formatted data is written to the system clipboard, and the formatted data in the system clipboard is used to paste to external tools.

[0007] In an optional implementation, the cell selection operation includes: a cell click event; The step of obtaining the coordinate information of the currently selected region includes: Get the current accessibility key status, and the cell click event in the cell selection operation; Based on the status of the auxiliary function keys and the cell click event, the row and column index of the starting cell in the currently selected area is determined as the starting coordinate, and the row and column index of the ending cell in the currently selected area is determined as the ending coordinate. The start coordinates and end coordinates are stored in isolation based on the unique identifier of the front-end table.

[0008] In an optional implementation, the auxiliary function key states include: a pressed state and a not pressed state; The step of determining the row and column index of the starting cell in the currently selected area as the starting coordinate and the row and column index of the ending cell in the currently selected area as the ending coordinate based on the status of the auxiliary function keys and the cell click event includes: If the current state of the accessibility key is pressed, and the starting cell has been determined, then the cell corresponding to the cell click event is determined to be the ending cell; If the current state of the accessibility key is not pressed, then the cell corresponding to the cell click event is determined to be the starting cell and the ending cell.

[0009] In an optional implementation, writing the formatted data to the system clipboard includes: Obtain the current browser environment and determine the browser environment's support status for the native clipboard application programming interface according to preset judgment rules; If the support status is "supported", the formatted data is written to the system clipboard through the native clipboard application programming interface. If the support status is not supported, a hidden text input element corresponding to the formatted data is created, and the hidden text input element is copied to the system clipboard.

[0010] In an optional implementation, the method further includes: Get the current keyboard input event; If the current keyboard input event is an input event triggered by a preset data copy key, then the current keyboard input event is determined to be a data copy event; The step of obtaining data for each cell within the currently selected area from the data source corresponding to the front-end table based on the coordinate information includes: If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

[0011] In an optional implementation, the method further includes: Get the trigger interval between the current data replication event and the previous data replication event; If the trigger interval is less than the preset interval, then the previous data copy event is determined to be an invalid event, and the current data copy event is determined to be a valid event. If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table, including: If the current keyboard input event is a data copy event, and the current data copy event is a valid event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

[0012] In an optional implementation, the method further includes: The visualization layer parameters are determined based on the coordinate information of the currently selected area and the absolute position of the table container; the absolute position of the table container is used to indicate the interface display area of ​​the currently selected area. Based on the visualization layer parameters, a visualization layer for the currently selected area is generated in the front-end table. The visualization layer is used to distinguish and display the currently selected area.

[0013] In an optional implementation, the cell selection operation includes: a selection operation on a starting cell, and a continuous interface scrolling operation following the selection operation on the starting cell; the method further includes: Based on the interface scrolling operation, the currently selected area is dynamically updated, and the updated coordinate information is obtained; Update the absolute position of the table container according to the interface scrolling operation; The visualization layer parameters are updated based on the updated coordinate information and the updated absolute position of the table container; Update the visualization layer based on the updated visualization layer parameters.

[0014] In a second aspect, the present invention provides a front-end table data copying device, comprising: The determination module is used to respond to a user's cell selection operation in the front-end table and determine the currently selected area corresponding to the cell selection operation.

[0015] The positioning module is used to obtain the coordinate information of the currently selected area. The coordinate information is used to indicate the table range of the currently selected area in the front-end table.

[0016] The acquisition module is used to acquire data of each cell in the currently selected area from the data source corresponding to the front-end table based on the coordinate information.

[0017] The processing module is used to format the data in each cell to obtain formatted data for each cell.

[0018] The writing module is used to write the formatted data to the system clipboard, and the formatted data in the system clipboard is used to paste to an external tool.

[0019] Thirdly, the present invention provides an electronic device comprising: a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the electronic device is in operation, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the method described in the first aspect above.

[0020] Fourthly, the present invention provides a computer-readable storage medium on which a computer program is stored, the computer program being executed by a processor to perform the steps of the method described in the first aspect above.

[0021] The beneficial effects of this application are: The front-end table data copying method provided in this application includes: responding to a user's cell selection operation in the front-end table, determining the currently selected area corresponding to the cell selection operation; obtaining the coordinate information of the currently selected area; the coordinate information is used to indicate the table range of the currently selected area in the front-end table; obtaining the data of each cell within the currently selected area from the data source corresponding to the front-end table according to the coordinate information; formatting the data of each cell to obtain formatted data for each cell; and writing the formatted data to the system clipboard, where the formatted data is used to paste to an external tool. In this embodiment, by determining the coordinate information of the currently selected area corresponding to the user's cell selection operation in the front-end table, the method of obtaining the data of each cell within the currently selected area based on the coordinate information and writing the formatted data obtained after formatting to the system clipboard is realized. The method of obtaining the data of each cell based on the coordinate information is not limited by the type or form of table, such as static or dynamic tables. Furthermore, when writing the formatted data obtained after formatting to the system clipboard, the writing method can be adjusted according to platform adaptability, thereby enhancing the table compatibility and cross-platform adaptability during front-end table data copying and improving data copying efficiency. Attached Figure Description

[0022] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0023] Figure 1 This application provides a schematic flowchart of a front-end table data copying method according to an embodiment of the present application. Figure 2 A schematic flowchart of a front-end table data copying method provided in another embodiment of this application; Figure 3 A schematic flowchart of a front-end table data copying method provided in another embodiment of this application; Figure 4 A schematic flowchart of a front-end table data copying method is provided in another embodiment of this application; Figure 5 A schematic diagram of a front-end table data copying device provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0024] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0025] Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0026] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0027] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0028] The following detailed description of some embodiments of this application is provided in conjunction with the accompanying drawings. Unless otherwise specified, the following embodiments and features can be combined with each other.

[0029] Current front-end table data copying solutions typically rely on native browser events (such as clicks and key presses) and DOM (Document Object Model) operations. They record coordinates by listening to cell click events and perform copying operations based on document.execCommand (a method for executing document-level commands in the browser environment) or the Clipboard API (an official standard for browser clipboard manipulation); or they use third-party table plugins or libraries (such as xlsx.js) for data export.

[0030] However, in practical applications, users often need to perform operations such as batch selection of table data, cross-tool / cross-platform copying, and dynamic table adaptation. Current front-end table data copying solutions often only adapt to a single front-end framework version and cannot simultaneously adapt to static tables (such as fixed tables that support Element UI) and dynamic tables (such as dynamic tables that support components). Furthermore, when copying and pasting across platforms, incompatibility may lead to copy failures, formatting problems, incorrect ordering, garbled characters, and other issues. It is evident that the current front-end table data copying solutions have poor table compatibility, insufficient cross-platform adaptability, and low data copying efficiency.

[0031] To address the aforementioned issues, the main objective of this application is to propose a front-end table data copying method that aims to enhance table compatibility and cross-platform adaptability during front-end table data copying, thereby improving data copying efficiency.

[0032] Figure 1 This is a schematic flowchart illustrating a front-end table data copying method according to an embodiment of this application. The execution subject of this method can be, for example, a computer, a server, or other device with computing power, but is not limited thereto. Please refer to... Figure 1 The method includes: S101. In response to the user's cell selection operation in the front-end table, determine the currently selected area corresponding to the cell selection operation.

[0033] For example, the aforementioned front-end table may refer to an interactive component in a web page used to display structured data. The aforementioned web page may be a page displayed in a browser, or a page displayed in an app (application), etc., but is not limited to the examples above. The aforementioned user cell selection operation in the front-end table may refer to the user's selection or selection of one or more cells in the aforementioned front-end table through interactive devices such as a mouse or touch screen. The area corresponding to one or more cells in the aforementioned front-end table selected or selected by the user through interactive devices such as a mouse or touch screen is the currently selected area corresponding to the cell selection operation. That is, the currently selected area includes one or more cells in the aforementioned front-end table selected or selected by the user through interactive devices such as a mouse or touch screen.

[0034] S102. Obtain the coordinate information of the currently selected area. The coordinate information is used to indicate the table range of the currently selected area in the front-end table.

[0035] For example, the coordinate information of the currently selected area can be represented in the form of two two-dimensional coordinates, such as (1,1) and (7,6). These two two-dimensional coordinates can be the row and column indices of the starting and ending cells of the currently selected area, respectively. The starting cell can refer to the cell where the cell selection operation of the currently selected area begins, and the ending cell can refer to the cell where the cell selection operation of the currently selected area ends.

[0036] For example, if a user selects the cell in the first row of the first column as the starting cell and the cell in the fifth row of the first column as the ending cell in the cell selection operation of the front-end table, the coordinate information of the currently selected area can be represented as (1,1) (1,5). The coordinate information of the currently selected area includes 5 cells, and these 5 cells are located in the same column in the front-end table.

[0037] If a user selects the first cell in the first row of the first column as the starting cell and the cell in the fifth row of the second column as the ending cell in the cell selection operation of the front-end table, the coordinate information of the currently selected area can be represented as (1,1) and (2,5). The coordinate information of the currently selected area includes 10 cells, namely (1,1)~(1,5) and (2,1)~(2,5). These 10 cells are in the front-end table.

[0038] If a user selects the first cell of the first column and first row as the starting cell in the cell selection operation of the front-end table, and only completes the point selection, that is, simultaneously selects the first cell of the first column and first row as the ending cell, then the coordinate information of the currently selected area can be represented as (1,1), and the coordinate information of the currently selected area (in this case) includes only 1 cell.

[0039] It is understandable that when selecting / multiple cells using the above method, the selection can be from left to right, right to left, top to bottom, or bottom to top, meaning it is compatible with both forward and reverse selection / multiple selection. The currently selected area obtained by reverse selection / multiple selection may be represented as (2,5) or (1,1), but this is not a limitation. Of course, the above is just one possible example. The actual representation of the coordinate information of the currently selected area is not limited to the above example, but can be adjusted and determined according to the actual situation. For example, if the row and column indices of the cells are letters, the coordinate information of the currently selected area may also be represented as (A,b) or (C,d), etc. There are no restrictions here.

[0040] S103. Based on the coordinate information above, obtain the data of each cell in the currently selected area from the data source corresponding to the front-end table above.

[0041] For example, the coordinate information mentioned above is obtained from the data source corresponding to the front-end table, which is the data of each cell in the currently selected area. For example, it can refer to obtaining the data information of one or more cells included in the coordinate information through the data source corresponding to the front-end table, such as text, letters, numbers, etc., but is not limited to this.

[0042] Specifically, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table. For example, the corresponding cell value can be extracted from the row data by traversing the calibrated row / column range and according to the property attribute (a field that encapsulates data and controls access) configured in the column, so as to ensure data accuracy.

[0043] S104. Format the data in each of the above cells to obtain the formatted data for each of the above cells.

[0044] For example, the above-mentioned formatting of the data in each cell may refer to organizing and converting the extracted data in each cell according to a structured text format that can be recognized by external tools.

[0045] Specifically, the above formatting process may include, for example, concatenating the data of each cell in the same row using a tab character (i.e., "\t") as the column separator to form a single line of text. Concatenating the text between different lines using a newline character (i.e., "\n") as the line separator, ultimately forming a complete text string whose row and column structure strictly corresponds to the currently selected area.

[0046] For example, if the currently selected area includes three columns and two rows, totaling six cells, the formatted data could be represented as "data of cell (1,1)\tdata of cell (1,2)\tdata of cell (1,3)\ndata of cell (2,1)\tdata of cell (2,2)\tdata of cell (2,3)". This formatted data can conform to the commonly used formatting standards that most spreadsheet software / platforms automatically recognize when pasting, but there are no specific restrictions here. It is understood that the specific processing described above is only one possible example and is not limited to the content of this example.

[0047] S105. Write the above-mentioned formatted data to the system clipboard. The above-mentioned formatted data in the system clipboard is used to paste to an external tool.

[0048] For example, writing the formatted data to the system clipboard can refer to storing the formatted text string in the operating system-level shared clipboard area through a programming interface provided by a web page display platform such as a browser or app.

[0049] Specifically, the above write operation can be implemented in different ways depending on the support of the current system environment. For example, one can first try calling the native clipboard application programming interface provided by modern browsers, and asynchronously store the formatted data into the clipboard through the text write method provided by the interface. This method is usually stable and efficient in a security context. If it is detected that the current environment does not support the native interface, a compatibility solution can be initiated: dynamically create a hidden text input element in the front-end table, set the above formatted data as the content value of the element, then trigger a system-level copy operation by executing the front-end table copy command, and finally remove the hidden element from the front-end table after completion.

[0050] However, the above is only one possible way to format data and write it to the system clipboard. The actual way to format data is not limited to the examples above, but can be adjusted and determined according to the actual situation.

[0051] The front-end table data copying method provided in this application includes: responding to a user's cell selection operation in the front-end table, determining the currently selected area corresponding to the cell selection operation; obtaining the coordinate information of the currently selected area. The coordinate information is used to indicate the table range of the currently selected area in the front-end table. Based on the coordinate information, obtaining the data of each cell within the currently selected area from the data source corresponding to the front-end table; formatting the data of each cell to obtain formatted data for each cell; and writing the formatted data to the system clipboard, where the formatted data is used to paste to an external tool. In this embodiment, by determining the coordinate information of the currently selected area corresponding to the user's cell selection operation in the front-end table, the method of obtaining the data of each cell within the currently selected area based on the coordinate information and writing the formatted data obtained after formatting to the system clipboard is realized. The method of obtaining the data of each cell based on the coordinate information is not limited by the type or form of table, such as static or dynamic tables. Furthermore, when writing the formatted data obtained after formatting to the system clipboard, the writing method can be adjusted according to platform adaptability, thereby enhancing the table compatibility and cross-platform adaptability during front-end table data copying and improving data copying efficiency.

[0052] Figure 2 A schematic flowchart of a front-end table data copying method provided in another embodiment of this application is shown below. Figure 2 As shown, optionally, in the foregoing Figure 1Based on the example, the above cell selection operation includes: cell click event.

[0053] The above-mentioned acquisition of the coordinate information of the currently selected area includes: S201. Get the current accessibility key status and the cell click event in the cell selection operation.

[0054] For example, the current accessibility key state mentioned above may refer to the state of the Shift key being pressed when selecting / multiple cells, which requires simultaneous operation with cell click events. That is, when the Shift key is pressed and a cell click event occurs, it is a selection / multiple selection of cells. When the Shift key is not pressed and cells are selected only through cell click events, the currently selected area only includes the selected cells.

[0055] Of course, the above are just possible examples, and the actual status of the accessibility keys is not limited to whether the Shift key is pressed or not.

[0056] S202. Based on the above auxiliary function key status and the above cell click event, determine the row and column index of the starting cell in the above currently selected area as the starting coordinate, and determine the row and column index of the ending cell in the above currently selected area as the ending coordinate.

[0057] For example, the above-mentioned auxiliary function key states and the above-mentioned cell click events determine the row and column index of the starting cell in the currently selected area as the starting coordinate and the row and column index of the ending cell in the currently selected area as the ending coordinate. For example, it can mean that when the Shift key is pressed and a cell click event occurs, the cell corresponding to the first cell click event during the process of pressing the Shift key is determined to be the starting cell and the cell corresponding to the second cell click event is determined to be the ending cell.

[0058] When a cell is clicked once without pressing the Shift key, the currently selected area will contain only one cell, with both the starting and ending cells being that cell.

[0059] S203. Based on the unique identifier of the aforementioned front-end table, store the aforementioned start coordinates and end coordinates in isolation.

[0060] For example, the unique identifier of the aforementioned front-end table can be a string of codes including but not limited to letters and numbers, or a unique front-end table name, etc. There are no specific restrictions here. The unique identifier of the aforementioned front-end table, which stores the aforementioned start coordinates and the aforementioned end coordinates in isolation, can ensure data isolation in scenarios where multiple tables coexist.

[0061] Furthermore, in the above Figure 2Based on the embodiments, the above-mentioned auxiliary function key states include: pressed state and unpressed state. The aforementioned accessibility key states and cell click events determine the row and column indices of the starting cell in the currently selected area as the starting coordinates and the row and column indices of the ending cell in the currently selected area as the ending coordinates, including: If the current state of the above-mentioned auxiliary function key is pressed, and the above-mentioned starting cell has been determined, then the cell corresponding to the above-mentioned cell click event is determined to be the above-mentioned ending cell.

[0062] If the current state of the above-mentioned accessibility key is not pressed, then the cells corresponding to the above-mentioned cell click event are determined to be the above-mentioned start cell and the above-mentioned end cell.

[0063] In addition, in the aforementioned Figure 1 Based on the embodiments, the above-mentioned writing of the formatted data to the system clipboard includes: Obtain the current browser environment and determine the browser environment's support status for the native clipboard application programming interface based on preset judgment rules.

[0064] If the above support status is "supported", then the formatted data will be written to the system clipboard through the native clipboard application programming interface.

[0065] If the above support status is not supported, then create the hidden text input element corresponding to the above formatted data, and copy the above hidden text input element to the above system clipboard.

[0066] For example, the aforementioned native clipboard application programming interface can refer to the native clipboard API (Application Programming Interface). The creation of the hidden text input element corresponding to the formatted data and the copying of the hidden text input element to the system clipboard can refer to textarea (a text area, a text field control element) + document.execCommand (a method for executing document-level commands in a browser environment). This solution determines the formatted data writing method based on the browser environment's support for the native clipboard application programming interface, which can ensure the availability of the copy function in different browsers and environments.

[0067] Optionally, in the foregoing Figure 1 Based on the embodiments, the above method also includes: Get the current keyboard input event.

[0068] If the current keyboard input event is an input event triggered by a preset data copy key, then the current keyboard input event is determined to be a data copy event.

[0069] The coordinate information mentioned above is obtained from the data source corresponding to the front-end table, which contains data for each cell within the currently selected area, including: If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

[0070] It is understandable that the above-mentioned acquisition of the current keyboard input event can occur after the current auxiliary function key status is acquired, and before the data of each cell in the currently selected area is acquired from the data source corresponding to the front-end table based on the coordinate information. That is, after the current selected area corresponding to the cell selection operation is determined, the data acquisition and copying operation for each cell in the currently selected area needs to be performed through the input event triggered by the preset data copy key.

[0071] Furthermore, based on the above embodiments, the method further includes: Get the trigger interval between the current data replication event and the previous data replication event.

[0072] If the trigger interval is less than the preset interval, then the previous data copy event is determined to be an invalid event, and the current data copy event is determined to be a valid event.

[0073] If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell within the currently selected area is retrieved from the data source corresponding to the front-end table, including: If the current keyboard input event is a data copy event, and the current data copy event is a valid event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

[0074] For example, the trigger interval between the current data replication event and the previous data replication event can be determined using the `setTimeout` function (a timer). The timer starts when each data replication event occurs. If another data replication event occurs within a preset interval after the current event, the trigger interval between the two events is too short, constituting a duplicate data replication event. In this case, only the latest data replication event can be executed, i.e., only the valid event is executed, to avoid performance issues caused by high-frequency operations. This preset interval can be, for example, 100ms, 200ms, 300ms, etc., and can be adjusted according to actual conditions, but is not limited to 100ms, 200ms, or 300ms.

[0075] Figure 3 A schematic flowchart of a front-end table data copying method is provided as another embodiment of this application, as shown below. Figure 3 As shown, optionally, in the foregoing Figure 1 Based on the embodiments, the above method further includes: S301. Based on the coordinate information of the currently selected area and the absolute position of the table container, determine the visualization layer parameters. The absolute position of the table container is used to indicate the interface display area of ​​the currently selected area.

[0076] S302. Based on the above visualization layer parameters, generate the above visualization layer of the currently selected area in the above front-end table. The above visualization layer is used to distinguish and display the above currently selected area.

[0077] For example, the absolute position of the table container can be obtained through the getBoundingClientRect method (a JavaScript DOM method for obtaining the position and size information of an element relative to the browser viewport, returning an interface DOMRect object containing properties such as top, left, right, bottom, width, and height), which can be used to calculate the offset, width, and height of the coating relative to the table container to ensure that the coating is precisely aligned with the selected area.

[0078] When generating the visualization layer, the `setTimeout` function can be used to determine the trigger interval between the current visualization layer generation event and the previous visualization layer generation event. This ensures a certain interval between the two visualization layer generation events, avoiding frequent style calculations caused by high-frequency operations such as scrolling and mouse movement. Additionally, during visualization layer generation, `requestAnimationFrame` (rAF, a browser-provided API used to optimize animation performance by matching the screen refresh rate to achieve smooth rendering and avoid stuttering and resource waste) can be used to synchronize with browser repaint, improving the smoothness of layer rendering.

[0079] Figure 4 A schematic flowchart illustrating a front-end table data copying method provided in another embodiment of this application is shown below. Figure 4 Furthermore, in the above Figure 3 Based on the embodiments, the above cell selection operation includes: a selection operation on a starting cell, and a continuous interface scrolling operation following the selection operation on the starting cell. The method also includes: S401. Based on the above interface scrolling operation, dynamically update the currently selected area and obtain the updated coordinate information.

[0080] S402. Update the absolute position of the table container according to the above interface scrolling operation.

[0081] S403. Based on the updated coordinate information and the updated absolute position of the table container, update the visualization layer parameters.

[0082] S404. Update the above visualization layer according to the updated visualization layer parameters.

[0083] For example, when the displayed content of the aforementioned front-end table changes due to user interface scrolling, the system can respond to this operation by repositioning the actual cell corresponding to the currently selected area and generating the updated coordinate information accordingly. Simultaneously, the absolute position of the table container within the viewport also changes with scrolling and needs to be updated synchronously. Then, combining the updated coordinate information and the updated absolute position of the table container, the position, size, and other style attributes of the visualization layer are recalculated to obtain the updated visualization layer parameters. Finally, based on the updated visualization layer parameters, the style of the existing visualization layer on the page is redrawn to ensure its position and style remain consistent with the underlying selected area, thus achieving uninterrupted and offset-free synchronous visualization feedback of the selected state during scrolling. This mechanism ensures a consistent user experience by listening to the aforementioned interface scrolling operations and performing the aforementioned linked calculations.

[0084] During the process of listening to the scrolling operation of the interface, for example, the FuncCreateFrameThrottle function (a throttling function used to limit the execution frequency of a function within a specific time interval to prevent performance problems caused by frequent event triggering, such as UI lag or excessive resource consumption) can be used to throttle the callback of the visualization layer generation, ensuring that the update frequency of the visualization layer is consistent with the browser frame rate when scrolling, thus avoiding lag.

[0085] In one possible implementation, after updating the aforementioned visualization layer, the `FuncTableCellRemoveOverlay` method (a custom or interactive function for the overlay of a `UITableViewCell` delete operation) can be called to remove scroll listeners and cached data, destroy related components, and call the `cachedTableEl${lwhTableDialogCode}` method (a method for dynamically generating HTML element IDs or CSS selectors to reference cached table elements) to clear the table container's DOM cache and avoid memory leaks. Afterwards, the listeners, visualization layer, and other related states are reset in preparation for subsequent visualization layer updates.

[0086] Figure 5This is a schematic diagram of a front-end table data copying device according to an embodiment of this application. This device can execute the aforementioned front-end table data copying method and can be integrated into devices with computing capabilities, such as computers and servers. Figure 5 As shown, the device may include: The determination module 510 is used to respond to the user's cell selection operation in the front-end table and determine the currently selected area corresponding to the cell selection operation.

[0087] The positioning module 520 is used to obtain the coordinate information of the currently selected area. This coordinate information indicates the range of the currently selected area within the front-end table.

[0088] The acquisition module 530 is used to obtain the data of each cell in the currently selected area from the data source corresponding to the front-end table based on the coordinate information mentioned above.

[0089] The processing module 540 is used to format the data in the above cells to obtain the formatted data of the above cells.

[0090] The writing module 550 is used to write the above-mentioned formatted data to the system clipboard, and the above-mentioned formatted data in the system clipboard is used to paste to an external tool.

[0091] The front-end table data copying method provided in this application includes: responding to a user's cell selection operation in the front-end table, determining the currently selected area corresponding to the cell selection operation; obtaining the coordinate information of the currently selected area. The coordinate information is used to indicate the table range of the currently selected area in the front-end table. Based on the coordinate information, obtaining the data of each cell within the currently selected area from the data source corresponding to the front-end table; formatting the data of each cell to obtain formatted data for each cell; and writing the formatted data to the system clipboard, where the formatted data is used to paste to an external tool. In this embodiment, by determining the coordinate information of the currently selected area corresponding to the user's cell selection operation in the front-end table, the method of obtaining the data of each cell within the currently selected area based on the coordinate information and writing the formatted data obtained after formatting to the system clipboard is realized. The method of obtaining the data of each cell based on the coordinate information is not limited by the type or form of table, such as static or dynamic tables. Furthermore, when writing the formatted data obtained after formatting to the system clipboard, the writing method can be adjusted according to platform adaptability, thereby enhancing the table compatibility and cross-platform adaptability during front-end table data copying and improving data copying efficiency.

[0092] Optionally, the above cell selection operation includes: cell click event.

[0093] The aforementioned positioning module 520 is specifically used to obtain the current status of the accessibility keys and the cell click event during the cell selection operation. Based on the accessibility key status and the cell click event, the row and column indices of the starting cell in the currently selected area are determined as the starting coordinates, and the row and column indices of the ending cell in the currently selected area are determined as the ending coordinates. The starting and ending coordinates are stored in isolation based on the unique identifier of the front-end table.

[0094] Optionally, the above-mentioned auxiliary function key states include: pressed state and unpressed state.

[0095] The aforementioned positioning module 520 is specifically used to determine the cell corresponding to the cell click event as the end cell if the current state of the aforementioned auxiliary function key is pressed and the aforementioned starting cell has been determined. If the current state of the aforementioned auxiliary function key is not pressed, the cell corresponding to the aforementioned cell click event is determined to be both the aforementioned starting cell and the aforementioned end cell.

[0096] Optionally, the writing module 550 is specifically used to obtain the current browser environment and determine the browser environment's support status for the native clipboard application programming interface (API) according to preset judgment rules. If the support status is "supported," the formatted data is written to the system clipboard through the native clipboard API. If the support status is "not supported," a hidden text input element corresponding to the formatted data is created, and the hidden text input element is copied to the system clipboard.

[0097] Optionally, the aforementioned front-end table data copying device further includes a monitoring module, used to acquire current keyboard input events. If the current keyboard input event is an input event triggered by a preset data copy key, then the current keyboard input event is determined to be a data copy event.

[0098] The aforementioned acquisition module 530 is specifically used to acquire the data of each cell in the currently selected area from the data source corresponding to the aforementioned front-end table, based on the aforementioned coordinate information, if the aforementioned current keyboard input event is a data copy event.

[0099] Optionally, the monitoring module can also be used to obtain the trigger interval between the current data replication event and the previous data replication event. If the trigger interval is less than a preset interval, the previous data replication event is determined to be an invalid event, and the current data replication event is determined to be a valid event.

[0100] The aforementioned acquisition module 530 is specifically used to acquire the data of each cell in the currently selected area from the data source corresponding to the aforementioned front-end table, based on the aforementioned coordinate information, if the aforementioned current keyboard input event is a data copy event and the aforementioned data copy event is a valid event.

[0101] Optionally, the aforementioned front-end table data copying device further includes a visualization module, used to determine visualization layer parameters based on the coordinate information of the currently selected area and the absolute position of the table container. The absolute position of the table container is used to indicate the interface display area of ​​the currently selected area. Based on the visualization layer parameters, a visualization layer of the currently selected area is generated in the front-end table, and the visualization layer is used to differentiate and display the currently selected area.

[0102] Optionally, the above cell selection operation includes: a selection operation on the starting cell, and a continuous interface scrolling operation following the selection operation on the starting cell.

[0103] The visualization module described above can also be used to dynamically update the currently selected area based on the interface scrolling operation, and obtain the updated coordinate information. It can also update the absolute position of the table container based on the interface scrolling operation. Furthermore, it can update the visualization layer parameters based on the updated coordinate information and the updated absolute position of the table container. Finally, it can update the visualization layer based on the updated visualization layer parameters.

[0104] The above-described device is used to execute the method provided in the foregoing embodiments, and its implementation principle and technical effect are similar, so they will not be described again here.

[0105] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device can be a computer, server, or other device with computing power, as described above. Figure 6 As shown, the device 600 includes: The processor 610, storage medium 620, and bus 630 are connected in communication via bus 630.

[0106] The storage medium 620 stores machine-readable instructions that can be executed by the processor 610. When the electronic device is running, the processor 610 executes the aforementioned machine-readable instructions to perform the aforementioned front-end table data copying method.

[0107] It should be understood that, Figure 6 The structure shown is only a schematic diagram of an electronic device; the electronic device may also include components that are larger than those shown. Figure 6 The more or fewer components shown, or having the same Figure 6 The different configurations shown. Figure 6The components shown can be implemented using hardware, software, or a combination thereof.

[0108] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the front-end table data copying method described in the above method embodiments.

[0109] Computer-readable storage media can be electronic storage devices such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM. Optionally, computer-readable storage media includes non-transitory computer-readable storage medium. The computer-readable storage medium has storage space for program code that performs any of the method steps described above. This program code can be read from or written to one or more computer program exhibits. The program code can be compressed, for example, in a suitable form.

[0110] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program exhibits according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0111] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0112] If the functionality is implemented as a software module and sold or used as an independent exhibit, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software exhibit. This computer software exhibit is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0113] The above description is merely a preferred embodiment of this application and does not limit the patent scope of this application. Any equivalent structural transformations made based on the inventive concept of this application and the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included within the patent protection scope of this application.

Claims

1. A method for copying front-end table data, characterized in that, include: In response to a user's cell selection operation in the front-end table, determine the currently selected area corresponding to the cell selection operation; Obtain the coordinate information of the currently selected area; The coordinate information is used to indicate the table range of the currently selected area in the front-end table; Based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table; The data in each cell is formatted to obtain the formatted data for each cell; The formatted data is written to the system clipboard, and the formatted data in the system clipboard is used to paste to external tools.

2. The front-end table data copying method according to claim 1, characterized in that, The cell selection operation includes: cell click event; The step of obtaining the coordinate information of the currently selected region includes: Get the current accessibility key status, and the cell click event in the cell selection operation; Based on the status of the auxiliary function keys and the cell click event, the row and column index of the starting cell in the currently selected area is determined as the starting coordinate, and the row and column index of the ending cell in the currently selected area is determined as the ending coordinate. The start coordinates and end coordinates are stored in isolation based on the unique identifier of the front-end table.

3. The front-end table data copying method according to claim 2, characterized in that, The auxiliary function key states include: pressed state and unpressed state; The step of determining the row and column index of the starting cell in the currently selected area as the starting coordinate and the row and column index of the ending cell in the currently selected area as the ending coordinate based on the status of the auxiliary function keys and the cell click event includes: If the current state of the accessibility key is pressed, and the starting cell has been determined, then the cell corresponding to the cell click event is determined to be the ending cell; If the current state of the accessibility key is not pressed, then the cell corresponding to the cell click event is determined to be the starting cell and the ending cell.

4. The front-end table data copying method according to claim 1, characterized in that, The step of writing the formatted data to the system clipboard includes: Obtain the current browser environment and determine the browser environment's support status for the native clipboard application programming interface according to preset judgment rules; If the support status is "supported", the formatted data is written to the system clipboard through the native clipboard application programming interface. If the support status is not supported, a hidden text input element corresponding to the formatted data is created, and the hidden text input element is copied to the system clipboard.

5. The front-end table data copying method according to claim 1, characterized in that, The method further includes: Get the current keyboard input event; If the current keyboard input event is an input event triggered by a preset data copy key, then the current keyboard input event is determined to be a data copy event; The step of obtaining data for each cell within the currently selected area from the data source corresponding to the front-end table based on the coordinate information includes: If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

6. The front-end table data copying method according to claim 5, characterized in that, The method further includes: Get the trigger interval between the current data replication event and the previous data replication event; If the trigger interval is less than the preset interval, then the previous data copy event is determined to be an invalid event, and the current data copy event is determined to be a valid event. If the current keyboard input event is a data copy event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table, including: If the current keyboard input event is a data copy event, and the current data copy event is a valid event, then based on the coordinate information, the data of each cell in the currently selected area is obtained from the data source corresponding to the front-end table.

7. The front-end table data copying method according to claim 1, characterized in that, The method further includes: The visualization layer parameters are determined based on the coordinate information of the currently selected area and the absolute position of the table container; the absolute position of the table container is used to indicate the interface display area of ​​the currently selected area. Based on the visualization layer parameters, a visualization layer for the currently selected area is generated in the front-end table. The visualization layer is used to distinguish and display the currently selected area.

8. The front-end table data copying method according to claim 7, characterized in that, The cell selection operation includes: selecting a starting cell, and a continuous interface scrolling operation following the selection of the starting cell; the method further includes: Based on the interface scrolling operation, the currently selected area is dynamically updated, and the updated coordinate information is obtained; Update the absolute position of the table container according to the interface scrolling operation; The visualization layer parameters are updated based on the updated coordinate information and the updated absolute position of the table container; Update the visualization layer based on the updated visualization layer parameters.

9. An electronic device, characterized in that, include: The device includes a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the electronic device is in operation, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the method as described in any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the method as described in any one of claims 1-8.

Images