fix： PDF preview

Author: cxymds

app/globals.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "react-pdf/dist/Page/AnnotationLayer.css";
+@import "react-pdf/dist/Page/TextLayer.css";
 
 @custom-variant dark (&:is(.dark *));
 

components/object/pdf-viewer.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { useTranslation } from "react-i18next"
+import { Document, Page, pdfjs } from "react-pdf"
+import { Spinner } from "@/components/ui/spinner"
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString()
+
+interface PdfViewerProps {
+  url: string
+}
+
+export function PdfViewer({ url }: PdfViewerProps) {
+  const { t } = useTranslation()
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const [numPages, setNumPages] = React.useState(0)
+  const [containerWidth, setContainerWidth] = React.useState(0)
+  const [loadError, setLoadError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    setNumPages(0)
+    setLoadError(null)
+  }, [url])
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(Math.floor(entry.contentRect.width))
+      }
+    })
+
+    observer.observe(container)
+    setContainerWidth(Math.floor(container.getBoundingClientRect().width))
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  if (!url) {
+    return (
+      <div className="flex h-[70vh] items-center justify-center text-sm text-muted-foreground">{t("Preview unavailable")}</div>
+    )
+  }
+
+  const pageWidth = containerWidth > 0 ? Math.max(Math.min(containerWidth - 24, 960), 240) : 800
+
+  return (
+    <div ref={containerRef} className="h-[70vh] w-full overflow-auto rounded-md bg-muted/20 p-3">
+      <Document
+        file={url}
+        loading={
+          <div className="flex h-[50vh] items-center justify-center">
+            <Spinner className="size-8 text-muted-foreground" />
+          </div>
+        }
+        error={<div className="p-4 text-sm text-destructive">{loadError ?? t("Preview unavailable")}</div>}
+        onLoadSuccess={({ numPages: pages }) => {
+          setNumPages(pages)
+        }}
+        onLoadError={() => {
+          setLoadError(t("Preview unavailable"))
+        }}
+      >
+        <div className="mx-auto flex w-full max-w-[960px] flex-col gap-3">
+          {Array.from({ length: numPages }, (_, index) => (
+            <div key={index + 1} className="overflow-hidden rounded-md border bg-background shadow-sm">
+              <Page pageNumber={index + 1} width={pageWidth} loading={null} renderTextLayer renderAnnotationLayer />
+            </div>
+          ))}
+        </div>
+      </Document>
+    </div>
+  )
+}

components/object/preview-modal.tsx

@@ -7,13 +7,14 @@ import { Spinner } from "@/components/ui/spinner"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { RiFullscreenExitLine, RiFullscreenLine } from "@remixicon/react"
+import { PdfViewer } from "@/components/object/pdf-viewer"
 
 const SAFE_TEXT_MIMES = ["application/json", "application/xml", "text/plain", "text/xml", "text/csv", "text/markdown"]
 const SAFE_TEXT_EXTENSIONS = [".txt", ".json", ".xml", ".csv", ".md", ".yml", ".yaml"]
 const SAFE_IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp", ".ico", ".tif", ".tiff"]
 const ALLOWED_SIZE = 1024 * 1024 * 2 // 2MB
 
-type PreviewMode = "text" | "image" | "sandbox" | "download"
+type PreviewMode = "text" | "image" | "pdf" | "sandbox" | "download"
 
 interface ObjectPreviewModalProps {
   show: boolean
@@ -51,6 +52,11 @@ function getPreviewMode(hasPreviewUrl: boolean, canRenderText: boolean, canRende
   return canRenderText ? "text" : "sandbox"
 }
 
+function isPdfPreview(contentType: string, objectKey: string) {
+  const keyLower = objectKey.toLowerCase()
+  return contentType === "application/pdf" || keyLower.endsWith(".pdf")
+}
+
 export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreviewModalProps) {
   const { t } = useTranslation()
   const [textContent, setTextContent] = React.useState("")
@@ -75,7 +81,8 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
   const isJson = normalizedContentType === "application/json" || objectKeyLower.endsWith(".json")
   const canRenderText = hasPreviewUrl && isSafeTextPreview(normalizedContentType, objectKey, objectSize)
   const canRenderImage = hasPreviewUrl && isImagePreview(normalizedContentType, objectKey)
-  const previewMode = getPreviewMode(hasPreviewUrl, canRenderText, canRenderImage)
+  const canRenderPdf = hasPreviewUrl && isPdfPreview(normalizedContentType, objectKey)
+  const previewMode = canRenderPdf ? "pdf" : getPreviewMode(hasPreviewUrl, canRenderText, canRenderImage)
   const isImageMode = previewMode === "image"
 
   const getFormattedContent = () => {
@@ -276,6 +283,8 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
         return (
           <iframe src={previewUrl} className="h-[70vh] w-full" frameBorder={0} title="Sandbox preview" sandbox="" />
         )
+      case "pdf":
+        return <PdfViewer url={previewUrl} />
       case "download":
       default:
         return (

package.json

@@ -37,11 +37,13 @@
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "node-forge": "^1.3.3",
+    "pdfjs-dist": "^5.4.296",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
     "react-i18next": "^16.5.4",
+    "react-pdf": "^10.4.1",
     "react-resizable-panels": "^4.5.6",
     "recharts": "2.15.4",
     "shadcn": "^3.8.0",