pdf basic

apps/web/components/pdf-viewer.js

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
+
+export default function PDFViewer() {
+  const [numPages, setNumPages] = useState(null);
+
+  function onDocumentLoadSuccess({ numPages: nextNumPages }) {
+    setNumPages(nextNumPages);
+  }
+
+  return (
+    <>
+      <Document
+        file="/sample.pdf"
+        onLoadSuccess={onDocumentLoadSuccess}
+        onLoadError={(err) => {
+          console.error(err);
+        }}
+        onSourceError={(err) => {
+          console.error(err);
+        }}
+        onLoadProgress={(err) => {
+          console.error(err);
+        }}
+        onPassword={(err) => {
+          console.error(err);
+        }}
+      >
+        <Page pageNumber={1} />
+      </Document>
+    </>
+  );
+}

apps/web/package.json

@@ -22,6 +22,7 @@
     "dotenv": "^16.0.3",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
+    "file-loader": "^6.2.0",
     "install": "^0.13.0",
     "next": "13.0.3",
     "next-auth": "^4.18.3",
@@ -31,10 +32,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
+    "react-pdf": "^6.2.2",
     "sass": "^1.57.1",
     "typescript": "4.8.4"
   },
   "devDependencies": {
+    "@types/react-pdf": "^6.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.4"

apps/web/pages/documents/[id].tsx

@@ -1,9 +1,19 @@
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 import Layout from "../../components/layout";
 import { NextPageWithLayout } from "../_app";
+import { Document, Page, pdfjs } from "react-pdf";
+import dynamic from "next/dynamic";
+
+const PDFViewer = dynamic(() => import("../../components/pdf-viewer"), {
+  ssr: false,
+});
 
 const DocumentsDetailPage: NextPageWithLayout = () => {
-  return <>docs</>;
+  return (
+    <div>
+      <PDFViewer />
+    </div>
+  );
 };
 
 DocumentsDetailPage.getLayout = function getLayout(page: ReactElement) {

apps/web/public/sample.pdf

@@ -0,0 +1,198 @@
+%PDF-1.3
+%<25><><EFBFBD><EFBFBD>
+
+1 0 obj
+<<
+/Type /Catalog
+/Outlines 2 0 R
+/Pages 3 0 R
+>>
+endobj
+
+2 0 obj
+<<
+/Type /Outlines
+/Count 0
+>>
+endobj
+
+3 0 obj
+<<
+/Type /Pages
+/Count 2
+/Kids [ 4 0 R 6 0 R ] 
+>>
+endobj
+
+4 0 obj
+<<
+/Type /Page
+/Parent 3 0 R
+/Resources <<
+/Font <<
+/F1 9 0 R 
+>>
+/ProcSet 8 0 R
+>>
+/MediaBox [0 0 612.0000 792.0000]
+/Contents 5 0 R
+>>
+endobj
+
+5 0 obj
+<< /Length 1074 >>
+stream
+2 J
+BT
+0 0 0 rg
+/F1 0027 Tf
+57.3750 722.2800 Td
+( A Simple PDF File ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 688.6080 Td
+( This is a small demonstration .pdf file - ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 664.7040 Td
+( just for use in the Virtual Mechanics tutorials. More text. And more ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 652.7520 Td
+( text. And more text. And more text. And more text. ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 628.8480 Td
+( And more text. And more text. And more text. And more text. And more ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 616.8960 Td
+( text. And more text. Boring, zzzzz. And more text. And more text. And ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 604.9440 Td
+( more text. And more text. And more text. And more text. And more text. ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 592.9920 Td
+( And more text. And more text. ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 569.0880 Td
+( And more text. And more text. And more text. And more text. And more ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 557.1360 Td
+( text. And more text. And more text. Even more. Continued on page 2 ...) Tj
+ET
+endstream
+endobj
+
+6 0 obj
+<<
+/Type /Page
+/Parent 3 0 R
+/Resources <<
+/Font <<
+/F1 9 0 R 
+>>
+/ProcSet 8 0 R
+>>
+/MediaBox [0 0 612.0000 792.0000]
+/Contents 7 0 R
+>>
+endobj
+
+7 0 obj
+<< /Length 676 >>
+stream
+2 J
+BT
+0 0 0 rg
+/F1 0027 Tf
+57.3750 722.2800 Td
+( Simple PDF File 2 ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 688.6080 Td
+( ...continued from page 1. Yet more text. And more text. And more text. ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 676.6560 Td
+( And more text. And more text. And more text. And more text. And more ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 664.7040 Td
+( text. Oh, how boring typing this stuff. But not as boring as watching ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 652.7520 Td
+( paint dry. And more text. And more text. And more text. And more text. ) Tj
+ET
+BT
+/F1 0010 Tf
+69.2500 640.8000 Td
+( Boring.  More, a little more text. The end, and just as well. ) Tj
+ET
+endstream
+endobj
+
+8 0 obj
+[/PDF /Text]
+endobj
+
+9 0 obj
+<<
+/Type /Font
+/Subtype /Type1
+/Name /F1
+/BaseFont /Helvetica
+/Encoding /WinAnsiEncoding
+>>
+endobj
+
+10 0 obj
+<<
+/Creator (Rave \(http://www.nevrona.com/rave\))
+/Producer (Nevrona Designs)
+/CreationDate (D:20060301072826)
+>>
+endobj
+
+xref
+0 11
+0000000000 65535 f
+0000000019 00000 n
+0000000093 00000 n
+0000000147 00000 n
+0000000222 00000 n
+0000000390 00000 n
+0000001522 00000 n
+0000001690 00000 n
+0000002423 00000 n
+0000002456 00000 n
+0000002574 00000 n
+
+trailer
+<<
+/Size 11
+/Root 1 0 R
+/Info 10 0 R
+>>
+
+startxref
+2714
+%%EOF

package.json

@@ -17,7 +17,6 @@
     "seed": "ts-node --transpile-only ./packages/prisma/seed.ts"
   },
   "dependencies": {
-    "react-hot-toast": "^2.4.0",
     "@documenso/prisma": "*",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
@@ -38,6 +37,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
+    "react-hot-toast": "^2.4.0",
     "typescript": "4.8.4"
+  },
+  "devDependencies": {
+    "file-loader": "^6.2.0"
   }
 }