🐛 fix: check for browser PDF print support

RylanBot · Aug 2, 2024 · a4c9949 · a4c9949
1 parent 7e6e7a2
commit a4c9949
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 14 deletions.
diff --git a/src/components/toolkit/PrintPdfButton.tsx b/src/components/toolkit/PrintPdfButton.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { RiFilePdf2Line } from "react-icons/ri";
+import { useReactToPrint } from "react-to-print";
+
+import { messageContainer } from "@/helpers/MessageContainer";
+
+interface PrintPdfButtonProps {
+  printRef: React.RefObject<HTMLDivElement>;
+}
+
+const PrintPdfButton: React.FC<PrintPdfButtonProps> = ({ printRef }) => {
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+    onBeforePrint() {
+      window.printStart = Date.now();
+    },
+    onAfterPrint() {
+      // 某些游览器没有弹出打印框，确依旧触发 onAfterPrint
+      let printEnd = Date.now();
+      if (!window.printStart || printEnd - window.printStart < 1000) {
+        messageContainer.info("Failed to print PDF");
+      }
+    },
+  });
+
+  return (
+    <button
+      onClick={handlePrint}
+      className="p-2 text-sm font-semibold bg-white text-slate-800"
+    >
+      <div className="flex items-center px-5 py-1">
+        <RiFilePdf2Line className="mr-4" />
+        <span className="text-xs">PDF</span>
+      </div>
+    </button>
+  );
+};
+
+export default PrintPdfButton;
diff --git a/src/helpers/FileService.ts b/src/helpers/FileService.ts
@@ -95,6 +95,14 @@ export const exportHtml = () => {
         #contact-icon {
             margin-top: 4px;
         }
+        @media (max-width: 640px) {
+            #export-page {
+                position: absolute;
+                transform: translate(-50%, -50%);
+                top: 50%;
+                left: 50%;
+            }
+        }
     `;
     cssString += customCss;
 

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -1,18 +1,16 @@
 import React, { useRef } from 'react';
-import ReactToPrint from 'react-to-print';
 
 import { BiCodeCurly } from 'react-icons/bi';
 import { BsGithub } from 'react-icons/bs';
-import { RiFilePdf2Line } from 'react-icons/ri';
 import { TbBrandHtml5, TbDownload, TbSettings2, TbUpload } from 'react-icons/tb';
 
 import ResumeContent from '@/components/layout/ResumeContent';
 import SettingEditor from '@/components/layout/SettingEditor';
 import LangSwitch from '@/components/toolkit/LangSwitch';
 import LatestNotice from '@/components/toolkit/LatestNotice';
+import PrintPdfButton from '@/components/toolkit/PrintPdfButton';
 
 import { exportHtml, exportJson, importJson } from '@/helpers/FileService';
-import { messageContainer } from '@/helpers/MessageContainer';
 
 import useEditWithUndo from '@/hooks/useEditWithUndo';
 import useLocale from '@/hooks/useLocale';
@@ -108,17 +106,7 @@ const Dashboard: React.FC = () => {
                                                     <span className="text-xs">HTML</span>
                                                 </div>
                                             </button>
-                                            <ReactToPrint
-                                                trigger={() => (
-                                                    <button className="p-2 text-sm font-semibold bg-white text-slate-800">
-                                                        <div className="flex items-center px-5 py-1">
-                                                            <RiFilePdf2Line className="mr-4" />
-                                                            <span className="text-xs">PDF</span>
-                                                        </div>
-                                                    </button>
-                                                )}
-                                                content={() => printComponentRef.current}
-                                            />
+                                            <PrintPdfButton printRef={printComponentRef}/>
                                         </div>
                                     </div>
                                 </div>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -17,6 +17,7 @@ body {
     box-shadow: none !important;
     margin: 0 !important;
     padding: 0 !important;
+    transform: scale(1) !important;
   }
 }
 

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        printStart?: number;
+    }
+}
+
+export {};