feat: support export csv in expand menu

Author: siam-ese

pages/content/lib/index.ts

@@ -2,8 +2,10 @@ import { Injector } from '@wendellhu/redi';
 import type { IMessage, PushStorageMessage, SetStorageMessage } from '@univer-clipsheet-core/shared';
 import { ClipsheetMessageTypeEnum, IframeViewTypeEnum, listenPingSignal, PingSignalKeyEnum, promisifyMessage, requestDataSource, sendSetIframeViewMessage } from '@univer-clipsheet-core/shared';
 import { ClientController, ClientViewService, CoverService, DetectTablesService, ElementInspectService, IframeViewController, RemountObserver, ScraperClientService, TableScrapingShadowComponent } from '@univer-clipsheet-core/ui';
-import type { IGetTableRecordsParams, IPreviewSheetStorageValue, ITableRecordsResponse } from '@univer-clipsheet-core/table';
-import { PreviewSheetFromEnum, TableDataSourceKeyEnum, TableStorageKeyEnum } from '@univer-clipsheet-core/table';
+import type { IGetTableRecordsParams, IInitialSheet, IPreviewSheetStorageValue, ITableRecord, ITableRecordsResponse } from '@univer-clipsheet-core/table';
+import { getCellValue, PreviewSheetFromEnum, TableDataSourceKeyEnum, TableStorageKeyEnum } from '@univer-clipsheet-core/table';
+import { saveAs } from 'file-saver';
+import Papa from 'papaparse';
 
 // You can use startAjaxIntercept to intercept AJAX requests
 // startAjaxIntercept(chrome.runtime.getURL('ajax-interceptor/index.iife.js'), (res) => {
@@ -103,3 +105,32 @@ listenPingSignal(PingSignalKeyEnum.ScraperFormShowed, () => {
         });
 });
 
+chrome.runtime.onMessage.addListener(async (req, _sender, _sendResponse) => {
+    if (req.type === 'EXPORT_CSV') {
+        const tableRecord = req.payload as ITableRecord;
+        const key = TableStorageKeyEnum.TableSheetsPrefix + tableRecord.id;
+        chrome.runtime.sendMessage({
+            type: ClipsheetMessageTypeEnum.GetStorage,
+            payload: key,
+        });
+        const res = await promisifyMessage<PushStorageMessage>((msg) => msg.type === ClipsheetMessageTypeEnum.PushStorage && msg.payload.key === key);
+
+        if (!Array.isArray(res.payload.value)) {
+            return;
+        }
+        const sheet = res.payload.value[0] as IInitialSheet;
+        if (!sheet) {
+            return;
+        }
+        const rows = sheet.rows;
+
+        const rowValues = rows.map((row) => row.cells.map(getCellValue));
+        const matrix = [sheet.columnName].concat(rowValues);
+        const csv = Papa.unparse(matrix);
+
+        const blob = new Blob([`\uFEFF${csv}`], { type: 'text/csv;charset=utf-8' });
+
+        saveAs(blob, `${tableRecord?.title}.csv`);
+    }
+});
+

pages/content/package.json

@@ -15,7 +15,6 @@
         "type-check": "tsc --noEmit"
     },
     "dependencies": {
-
         "@univer-clipsheet-core/ajax-intercept": "workspace:*",
         "@univer-clipsheet-core/scraper": "workspace:*",
         "@univer-clipsheet-core/shared": "workspace:*",
@@ -24,6 +23,8 @@
         "@univer-clipsheet/shared": "workspace:*",
         "@wendellhu/redi": "0.16.1",
         "debounce": "2.1.0",
+        "file-saver": "2.0.5",
+        "papaparse": "5.4.1",
         "rc-checkbox": "3.3.0",
         "rc-select": "14.15.2",
         "rc-switch": "4.1.0",

pages/popup/package.json

@@ -15,7 +15,6 @@
         "type-check": "tsc --noEmit"
     },
     "dependencies": {
-
         "@heroicons/react": "2.1.3",
         "@univer-clipsheet-core/locale": "workspace:*",
         "@univer-clipsheet-core/shared": "workspace:*",

pages/popup/src/MyPopup.tsx

@@ -1,7 +1,7 @@
 import '@src/index.css';
 import { isZhCN, t } from '@univer-clipsheet-core/locale';
 import type { SetStorageMessage } from '@univer-clipsheet-core/shared';
-import { ClipsheetMessageTypeEnum, closePopup, IframeViewTypeEnum, sendSetIframeViewMessage } from '@univer-clipsheet-core/shared';
+import { ClipsheetMessageTypeEnum, closePopup, getActiveTabId, IframeViewTypeEnum, sendSetIframeViewMessage } from '@univer-clipsheet-core/shared';
 import { deleteTaskRecord, TableStorageKeyEnum, triggerRecordTypes } from '@univer-clipsheet-core/table';
 import type { DropdownMenuItem } from '@univer-clipsheet-core/ui';
 import { DropdownMenu, getWorkflowColumnsByTable, openWorkflowDialog, Popup, PopupViewService, Tooltip } from '@univer-clipsheet-core/ui';
@@ -20,6 +20,7 @@ import {
 enum MoreMenuKey {
     Schedule = 'schedule',
     Delete = 'delete',
+    ExportCSV = 'export_csv',
 }
 
 enum ContactMenuKey {
@@ -35,7 +36,7 @@ function navigateToGithub() {
 
 export function MyPopup() {
     const service = useMemo(() => {
-        const popupViewService = new PopupViewService<string>();
+        const popupViewService = new PopupViewService();
 
         popupViewService.onTableMoreMenuClick(async (key, record) => {
             if (key === MoreMenuKey.Delete) {
@@ -48,6 +49,13 @@ export function MyPopup() {
                     columns,
                 });
             }
+            if (key === MoreMenuKey.ExportCSV) {
+                const activeTabId = await getActiveTabId();
+                activeTabId && chrome.tabs.sendMessage(activeTabId, {
+                    type: 'EXPORT_CSV',
+                    payload: record,
+                });
+            }
         });
 
         popupViewService.onTableRecordClick((record) => {
@@ -80,6 +88,10 @@ export function MyPopup() {
                     text: t('ScheduleDataUpdate'),
                     key: MoreMenuKey.Schedule,
                 },
+                {
+                    text: t('ExportAsWith', { text: 'CSV' }),
+                    key: MoreMenuKey.ExportCSV,
+                },
                 {
                     text: <span className="text-[#F05252]">{t('Delete')}</span>,
                     key: MoreMenuKey.Delete,