feat: export page as file (#2923)

apps/electron/src/main/export/pdf.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, dialog, shell } from 'electron';
+import { BrowserWindow, dialog } from 'electron';
 import fs from 'fs-extra';
 
 import { logger } from '../logger';
@@ -49,8 +49,6 @@ export async function savePDFFileAs(
           logger.log(`Wrote PDF successfully to ${filePath}`);
         });
       });
-
-    await shell.openPath(filePath);
     return { filePath };
   } catch (err) {
     logger.error('savePDFFileAs', err);

apps/web/src/layouts/workspace-layout.tsx

@@ -1,6 +1,7 @@
 import { Content, displayFlex } from '@affine/component';
 import { AffineWatermark } from '@affine/component/affine-watermark';
 import { appSidebarResizingAtom } from '@affine/component/app-sidebar';
+import { NotificationCenter } from '@affine/component/notification-center';
 import type { DraggableTitleCellData } from '@affine/component/page-list';
 import { StyledTitleLink } from '@affine/component/page-list';
 import {
@@ -444,6 +445,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
         <PageListTitleCellDragOverlay />
       </DndContext>
       <QuickSearch />
+      <NotificationCenter />
       <Setting />
     </>
   );

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -1,3 +1,4 @@
+import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageBlockModel } from '@blocksuite/blocks';
 import { ContentParser } from '@blocksuite/blocks/content-parser';
@@ -7,7 +8,9 @@ import {
   ExportToHtmlIcon,
   ExportToMarkdownIcon,
   ExportToPdfIcon,
+  ExportToPngIcon,
 } from '@blocksuite/icons';
+import { useSetAtom } from 'jotai';
 import { useCallback, useRef } from 'react';
 
 import { Menu, MenuItem } from '../../..';
@@ -19,43 +22,73 @@ const ExportToPdfMenuItem = ({
   const t = useAFFiNEI18N();
   const contentParserRef = useRef<ContentParser>();
   const { currentEditor } = globalThis;
+  const setPushNotification = useSetAtom(pushNotificationAtom);
+
   const onClickDownloadPDF = useCallback(() => {
     if (!currentEditor) {
       return;
     }
-    const contentParser =
-      contentParserRef.current ??
-      (contentParserRef.current = new ContentParser(currentEditor.page));
 
-    window.apis?.export
+    if (environment.isDesktop && currentEditor.mode === 'page') {
-      .savePDFFileAs(
+      window.apis?.export
-        (currentEditor.page.root as PageBlockModel).title.toString()
+        .savePDFFileAs(
-      )
+          (currentEditor.page.root as PageBlockModel).title.toString()
-      .then(result => {
+        )
-        if (result !== undefined) {
+        .then(() => {
-          return;
+          onSelect?.({ type: 'pdf' });
-        }
+          setPushNotification({
-        return contentParser.exportPdf();
+            key: 'export-to-pdf',
-      })
+            title: 'export',
-      .then(() => {
+            message: 'Export success',
-        onSelect?.({ type: 'pdf' });
+            type: 'success',
-      })
+          });
-      .catch(err => {
+        })
-        console.error(err);
+        .catch(err => {
-      });
+          console.error(err);
-  }, [currentEditor, onSelect]);
+          setPushNotification({
-  if (currentEditor && currentEditor.mode === 'page') {
+            key: 'export-to-pdf',
-    return (
+            title: 'export',
-      <MenuItem
+            message: 'Export error',
-        data-testid="export-to-pdf"
+            type: 'error',
-        onClick={onClickDownloadPDF}
+          });
-        icon={<ExportToPdfIcon />}
+        });
-      >
+    } else {
-        {t['Export to PDF']()}
+      const contentParser =
-      </MenuItem>
+        contentParserRef.current ??
-    );
+        (contentParserRef.current = new ContentParser(currentEditor.page));
-  }
+
-  return null;
+      contentParser
+        .exportPdf()
+        .then(() => {
+          onSelect?.({ type: 'pdf' });
+          setPushNotification({
+            key: 'export-to-pdf',
+            title: 'export',
+            message: 'Export success',
+            type: 'success',
+          });
+        })
+        .catch(err => {
+          console.error(err);
+          setPushNotification({
+            key: 'export-to-pdf',
+            title: 'export',
+            message: 'Export error',
+            type: 'error',
+          });
+        });
+    }
+  }, [currentEditor, onSelect, setPushNotification]);
+
+  return (
+    <MenuItem
+      data-testid="export-to-pdf"
+      onClick={onClickDownloadPDF}
+      icon={<ExportToPdfIcon />}
+    >
+      {t['Export to PDF']()}
+    </MenuItem>
+  );
 };
 
 const ExportToHtmlMenuItem = ({
@@ -89,33 +122,56 @@ const ExportToHtmlMenuItem = ({
   );
 };
 
-// const ExportToPngMenuItem = ({
+const ExportToPngMenuItem = ({
-//   onSelect,
+  onSelect,
-// }: CommonMenuItemProps<{ type: 'png' }>) => {
+}: CommonMenuItemProps<{ type: 'png' }>) => {
-//   const t = useAFFiNEI18N();
+  const t = useAFFiNEI18N();
-//   const contentParserRef = useRef<ContentParser>();
+  const contentParserRef = useRef<ContentParser>();
-//   return (
+  const { currentEditor } = globalThis;
-//     <>
+  const setPushNotification = useSetAtom(pushNotificationAtom);
-//       {globalThis.currentEditor!.mode === 'page' && (
+
-//         <MenuItem
+  const onClickDownloadPNG = useCallback(() => {
-//           data-testid="export-to-png"
+    if (!currentEditor) {
-//           onClick={() => {
+      return;
-//             if (!contentParserRef.current) {
+    }
-//               contentParserRef.current = new ContentParser(
+    const contentParser =
-//                 globalThis.currentEditor!.page
+      contentParserRef.current ??
-//               );
+      (contentParserRef.current = new ContentParser(currentEditor.page));
-//             }
+
-//             contentParserRef.current.exportPng();
+    contentParser
-//             onSelect?.({ type: 'png' });
+      .exportPng()
-//           }}
+      .then(() => {
-//           icon={<ExportToPngIcon />}
+        onSelect?.({ type: 'png' });
-//         >
+        setPushNotification({
-//           {t['Export to PNG']()}
+          key: 'export-to-pdf',
-//         </MenuItem>
+          title: 'export',
-//       )}
+          message: 'Export success',
-//     </>
+          type: 'success',
-//   );
+        });
-// };
+      })
+      .catch(err => {
+        console.error(err);
+        setPushNotification({
+          key: 'export-to-pdf',
+          title: 'export',
+          message: 'Export error',
+          type: 'error',
+        });
+      });
+  }, [currentEditor, onSelect, setPushNotification]);
+
+  return (
+    <>
+      <MenuItem
+        data-testid="export-to-png"
+        onClick={onClickDownloadPNG}
+        icon={<ExportToPngIcon />}
+      >
+        {t['Export to PNG']()}
+      </MenuItem>
+    </>
+  );
+};
 
 const ExportToMarkdownMenuItem = ({
   onSelect,
@@ -161,7 +217,7 @@ export const Export = ({
         <>
           <ExportToPdfMenuItem></ExportToPdfMenuItem>
           <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
-          {/* <ExportToPngMenuItem></ExportToPngMenuItem> */}
+          <ExportToPngMenuItem></ExportToPngMenuItem>
           <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
         </>
       }

packages/component/src/components/workspace/index.css.ts

@@ -65,6 +65,8 @@ export const mainContainerStyle = style({
       '@media': {
         print: {
           overflow: 'visible',
+          margin: '0px',
+          borderRadius: '0px',
         },
       },
     },