表格导出excel 如果有单元格变色，会非常卡顿

[wangchenyi1996]

` // 只要styles里面加属性，就会非常卡顿 onExportExcel = () => { if (this.tableRef.current) { let jqarr: any = $($(this.tableRef.current as any).find('table')); if (jqarr && jqarr.length > 0) { // exportToSheet(jqarr as any, '烘干炉点检'); jqarr.tableExport({ type: 'excel', mso: { fileFormat: 'xls', styles: [ 'background-image', 'height', 'background-color', 'border-top', 'border-right', 'border-bottom', 'border-left', // add // 'font-size', // 'text-align', // 'font-weight', ], }, fileName: '烘干炉点检', }); } } };

`

[hhurz]

It is a known issue that the export speed of the plugin slows down drastically when the table cells contain style and class attributes. There are two jquery functions that have poor performance when css styles are used extensively. One function is jQuery css() and the other is jQuery is(). Both functions are used in this plugin, the first to retrieve CSS information from rows and cells and the second to check the visibility of cells.

Does your table contain hidden elements (tr, th, td) ? If so, this could be one reason why the export process slows down. For that there is an option exportHiddenCells. Try to set this option to true and export your table then.

There is no way (at least for me) to optimize the plugins code for faster export of "highly stylized" tables. So if you are not able to optimize the original table's css styling but you want to export to Excel or to PDF, you shouldn't use this plugin.

[wangchenyi1996]

Hello, this attribute setting has no effect, but the speed is still slow. It will take about 6 minutes to export 100 pieces of data

[hhurz]

Some questions:

• When you say 100 pieces you mean 100 records, right?
• How many rows and columns does your table have?
• Which browser do you use?
• Could you provide an example of the HTML code for the table?

[wangchenyi1996]

Thank you. Just a moment, I'll organize the code now

[wangchenyi1996]

Hello, this is the code I wrote. Could you please run it and take a look，This is a compressed package that needs to be decompressed and run The operation steps are as follows 1 npm install 2 npm start 3 Find/report/src/pages/check/strong gan lu_ History/Details.tsx file test.zip

[wangchenyi1996]

1 The table has approximately 120 rows and over 20 columns 2 Use the latest version of Google Chrome 3 Code development using React

[hhurz]

Thank you very much for providing the source code. I managed to get it working and was able to test the export of the table. As feared, this problem is a combination of several unfavorable conditions:

1. you are using Google Chrome. Indeed, with this browser, exporting the table takes almost 6 minutes. With Firefox, the same table is exported in less than 3 seconds!

2. the HTML table contains many style statements, which significantly slows down the determination of the effective styles of an HTML element by the window:getComputedStyle() function. This function is the only way to determine the styles of an HTML element.

As I wrote above, there is no way to optimize the plugin's code for faster export of "heavily styled" tables. So the only option left is to simplify the styling of the table or not to export the styling of the table.

Unfortunately, I don't see any other possible solution.

[wangchenyi1996]

Thank you very much for your help I would like to ask why Google Chrome is so stuck and Firefox is so fast

[hhurz]

It's possible that the performance difference between Google Chrome and Firefox is due to the way they handle the calculation of computed styles for tables.

When you call getComputedStyle on an element, the browser needs to calculate the computed styles for that element based on its inherited styles, the styles defined directly on the element, and any styles defined in external style sheets or inline styles. This process can be computationally expensive, especially for large tables with many elements.

It's possible that Chrome's implementation of this calculation is less optimized for large tables than Firefox's implementation, leading to the slower performance we are seeing. Alternatively, there could be other factors at play, such as differences in how the browsers cache computed styles or handle DOM manipulation.

Finally, only the developers of the two browsers can answer your question.

[wangchenyi1996]

Thank you very much for your help I will continue to review the relevant documents