From 61a719d10c24044650fbb1f7c82ae523921c4c5c Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 14 May 2024 11:38:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=97=A0=E6=B3=95=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=9A=84PDF=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.js | 17 ++++++++++-------
 components/Pdf.js        | 14 ++++++++++++++
 styles/notion.css        |  4 ++--
 3 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 components/Pdf.js

diff --git a/components/NotionPage.js b/components/NotionPage.js
index f8e8e396..41716cf4 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -211,13 +211,16 @@ const Equation = dynamic(
   { ssr: false }
 )
 
-// 文档
-const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
-  {
-    ssr: false
-  }
-)
+// 原版文档
+// const Pdf = dynamic(
+//   () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
+//   {
+//     ssr: false
+//   }
+// )
+const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
+  ssr: false
+})
 
 // 美化代码 from: https://github.com/txs
 const PrismMac = dynamic(() => import('@/components/PrismMac'), {
diff --git a/components/Pdf.js b/components/Pdf.js
new file mode 100644
index 00000000..6f4a8321
--- /dev/null
+++ b/components/Pdf.js
@@ -0,0 +1,14 @@
+/**
+ * 渲染pdf
+ * 直接用googledocs预览pdf
+ * @param {*} file
+ * @returns
+ */
+export function Pdf({ file }) {
+  const src =
+    'https://docs.google.com/viewer?embedded=true&url=' +
+    encodeURIComponent(file)
+  return (
+    <embed src={src} type='application/pdf' width='100%' height='100%'></embed>
+  )
+}
diff --git a/styles/notion.css b/styles/notion.css
index 83c5327b..0991011e 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
   /* color: var(--notion-gray); */
 }
 
-.notion-asset-wrapper-pdf > div {
+/* .notion-asset-wrapper-pdf > div {
   width: unset !important;
-}
+} */
 
 /* pdf预览适配页面 */
 .react-pdf__Page__canvas,