Feat: PDF 预览（https://github.com/cloudreve/Cloudreve/issues/279）

2025-12-26 04:02:47 +00:00 · 2020-05-03 09:32:22 +08:00 · 2020-05-03 09:32:22 +08:00 · 97c1d76212
parent fb15497e61
commit 97c1d76212
10 changed files with 263 additions and 6 deletions
--- a/package.json
+++ b/package.json
@ -65,6 +65,7 @@
    "react-dplayer": "^0.3.3",
    "react-hotkeys": "^2.0.0",
    "react-lazy-load-image-component": "^1.3.2",
+    "react-pdf": "^4.1.0",
    "react-photo-view": "^0.4.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
--- a/src/App.js
+++ b/src/App.js
@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import AuthRoute from "./middleware/AuthRoute";
 import Navbar from "./component/Navbar/Navbar.js";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
@ -29,6 +29,8 @@ import Register from "./component/Login/Register";
 import Activation from "./component/Login/Activication";
 import ResetForm from "./component/Login/ResetForm";
 import Reset from "./component/Login/Reset";
+import PDFViewer from "./component/Viewer/PDF";
+import PageLoading from "./component/Placeholder/PageLoading";

 export default function App() {
    const themeConfig = useSelector(state => state.siteConfig.theme);
@ -114,6 +116,12 @@ export default function App() {
                                <DocViewer />
                            </AuthRoute>

+                            <AuthRoute path={`${path}pdf`} isLogin={isLogin}>
+                                <Suspense fallback={<PageLoading/>}>
+                                    <PDFViewer />
+                                </Suspense>
+                            </AuthRoute>
+
                            <AuthRoute path={`${path}aria2`} isLogin={isLogin}>
                                <Download />
                            </AuthRoute>
@ -184,6 +192,12 @@ export default function App() {
                                <TextViewer />
                            </Route>

+                            <Route path={`${path}s/:id/pdf(/)*`}>
+                                <Suspense fallback={<PageLoading/>}>
+                                    <PDFViewer />
+                                </Suspense>
+                            </Route>
+
                            <Route path="*">
                                <NotFound msg={"页面不存在"} />
                            </Route>
--- a/src/component/FileManager/ContextMenu.js
+++ b/src/component/FileManager/ContextMenu.js
@ -252,6 +252,21 @@ class ContextMenuCompoment extends Component {
                    "/video?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
                );
                return;
+            case "pdf":
+                if (isShare) {
+                    this.props.history.push(
+                        this.props.selected[0].key +
+                        "/pdf?name=" +
+                        encodeURIComponent(this.props.selected[0].name) +
+                        "&share_path=" +
+                        encodeURIComponent(previewPath)
+                    );
+                    return;
+                }
+                this.props.history.push(
+                    "/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                );
+                return;
            case "edit":
                if (isShare) {
                    this.props.history.push(
--- a/src/component/FileManager/ObjectIcon.js
+++ b/src/component/FileManager/ObjectIcon.js
@ -200,6 +200,19 @@ export default function ObjectIcon(props) {
                }
                history.push("/text?p=" + encodeURIComponent(previewPath) + "&id=" + selected[0].id);
                return;
+            case "pdf":
+                if (isShare) {
+                    history.push(
+                        selected[0].key +
+                        "/pdf?name=" +
+                        encodeURIComponent(selected[0].name) +
+                        "&share_path=" +
+                        encodeURIComponent(previewPath)
+                    );
+                    return;
+                }
+                history.push("/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + selected[0].id);
+                return;
            default:
                OpenLoadingDialog("获取下载地址...");
                return;
--- a/src/component/Navbar/Navbar.js
+++ b/src/component/Navbar/Navbar.js
@ -404,6 +404,21 @@ class NavbarCompoment extends Component {
                    "/text?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
                );
                return;
+            case "pdf":
+                if (isShare) {
+                    this.props.history.push(
+                        this.props.selected[0].key +
+                        "/pdf?name=" +
+                        encodeURIComponent(this.props.selected[0].name) +
+                        "&share_path=" +
+                        encodeURIComponent(previewPath)
+                    );
+                    return;
+                }
+                this.props.history.push(
+                    "/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                );
+                return;
            default:
                return;
        }
--- a/src/component/Share/SharePreload.js
+++ b/src/component/Share/SharePreload.js
@ -5,10 +5,9 @@ import API from "../../middleware/Api";
 import { changeSubTitle, toggleSnackbar } from "../../actions";
 import { useDispatch } from "react-redux";
 import Notice from "./NotFound";
-
-const LockedFile = React.lazy(() => import("./LockedFile"));
-const SharedFile = React.lazy(() => import("./SharedFile"));
-const SharedFolder = React.lazy(() => import("./SharedFolder"));
+import LockedFile from "./LockedFile";
+import SharedFile from "./SharedFile";
+import SharedFolder from "./SharedFolder";

 export default function SharePreload() {
    const dispatch = useDispatch();
--- a/src/component/Share/SharedFile.js
+++ b/src/component/Share/SharedFile.js
@ -180,6 +180,11 @@ class SharedFileCompoment extends Component {
                    "/text?name=" +
                    encodeURIComponent(this.props.share.source.name));
                return
+            case "pdf":
+                this.props.history.push(this.props.share.key +
+                    "/pdf?name=" +
+                    encodeURIComponent(this.props.share.source.name));
+                return
            default:
                this.props.toggleSnackbar(
                    "top",
--- a/src/component/Viewer/PDF.js
+++ b/src/component/Viewer/PDF.js
@ -0,0 +1,123 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import { getBaseURL } from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { changeSubTitle, toggleSnackbar } from "../../actions";
+import pathHelper from "../../utils/page";
+import TextLoading from "../Placeholder/TextLoading";
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+const useStyles = makeStyles(theme => ({
+    layout: {
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            maxWidth: 900,
+            marginLeft: "auto",
+            marginRight: "auto"
+        },
+        marginBottom: 50
+    },
+    "@global": {
+        canvas: {
+            width: "100% !important",
+            height: "auto !important",
+            borderRadius: 4
+        }
+    },
+    paper: {
+        marginBottom: theme.spacing(3)
+    }
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function PDFViewer(props) {
+    const math = useRouteMatch();
+    let location = useLocation();
+    let query = useQuery();
+    let { id } = useParams();
+
+    const [pageNumber, setPageNumber] = useState(1);
+
+    const dispatch = useDispatch();
+    const SetSubTitle = useCallback(title => dispatch(changeSubTitle(title)), [
+        dispatch
+    ]);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        if (!pathHelper.isSharePage(location.pathname)) {
+            let path = query.get("p").split("/");
+            SetSubTitle(path[path.length - 1]);
+        } else {
+            SetSubTitle(query.get("name"));
+        }
+        // eslint-disable-next-line
+    }, [math.params[0], location]);
+
+    const removeTextLayerOffset = () => {
+        const textLayers = document.querySelectorAll(
+            ".react-pdf__Page__textContent"
+        );
+        textLayers.forEach(layer => {
+            const { style } = layer;
+            style.display = "none";
+        });
+    };
+
+    const classes = useStyles();
+    return (
+        <div className={classes.layout}>
+            <Document
+                onLoadSuccess={({ numPages }) => setPageNumber(numPages)}
+                onLoadError = {error=>{
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        "PDF 加载失败，" + error.message,
+                        "error"
+                    );
+                }}
+                loading={
+                    <Paper className={classes.paper} elevation={1}>
+                        <TextLoading />
+                    </Paper>
+                }
+                file={
+                    getBaseURL() +
+                    (pathHelper.isSharePage(location.pathname)
+                        ? "/share/preview/" +
+                          id +
+                          (query.get("share_path") !== ""
+                              ? "?path=" +
+                                encodeURIComponent(query.get("share_path"))
+                              : "")
+                        : "/file/preview/" + query.get("id"))
+                }
+            >
+                {Array.from(new Array(pageNumber), (el, index) => (
+                    <Paper className={classes.paper} elevation={1}>
+                        <Page
+                            width={900}
+                            onLoadSuccess={removeTextLayerOffset}
+                            key={`page_${index + 1}`}
+                            pageNumber={index + 1}
+                            renderAnnotationLayer={false}
+                        />
+                    </Paper>
+                ))}
+            </Document>
+        </div>
+    );
+}
--- a/src/config.js
+++ b/src/config.js
@ -2,7 +2,7 @@ export const imgPreviewSuffix = ["bmp","png","gif","jpg","jpeg","svg","webp"];
 export const msDocPreviewSuffix = ["ppt","pptx","pps","doc","docx","xlsx","xls"];
 export const audioPreviewSuffix = ["mp3","ogg"];
 export const videoPreviewSuffix = ["mp4"];
-export const directOpenPreviewSuffix = ["pdf"];
+export const pdfPreviewSuffix = ["pdf"];
 export const editSuffix = ["md","html","sql","go","py","js","json","c","cpp","css","txt","ini"];
 export const mediaType = {
    audio:["mp3","flac","ape","wav","acc","ogg"],
@ -45,6 +45,8 @@ export const isPreviewable = name=>{
        return "video";
    }else if(editSuffix.indexOf(suffix)!==-1){
        return "edit";
+    }else if(pdfPreviewSuffix.indexOf(suffix)!==-1){
+        return "pdf";
    }
    return false;
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -3784,6 +3784,11 @@ emojis-list@^2.0.0:
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=

+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 encodeurl@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@ -6488,6 +6493,15 @@ loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.
    emojis-list "^2.0.0"
    json5 "^1.0.1"

+loader-utils@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@ -6524,6 +6538,11 @@ lodash.memoize@^4.1.2:
  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=

+lodash.once@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
 lodash.sortby@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@ -6601,6 +6620,11 @@ make-dir@^2.0.0, make-dir@^2.1.0:
    pify "^4.0.1"
    semver "^5.6.0"

+make-event-props@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.2.0.tgz#96b87d88919533b8f8934b58b4c3d5679459a0cf"
+  integrity sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==
+
 makeerror@1.0.x:
  version "1.0.11"
  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@ -6701,6 +6725,11 @@ memory-fs@^0.5.0:
    errno "^0.1.3"
    readable-stream "^2.0.1"

+merge-class-names@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.3.0.tgz#c4cdc1a981a81dd9afc27aa4287e912a337c5dee"
+  integrity sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ==
+
 merge-deep@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@ -7028,6 +7057,11 @@ no-case@^2.2.0:
  dependencies:
    lower-case "^1.1.1"

+node-ensure@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
+  integrity sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=
+
 node-fetch@^1.0.1:
  version "1.7.3"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@ -7677,6 +7711,14 @@ pbkdf2@^3.0.3:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

+pdfjs-dist@2.1.266:
+  version "2.1.266"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz#cded02268b389559e807f410d2a729db62160026"
+  integrity sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==
+  dependencies:
+    node-ensure "^0.0.0"
+    worker-loader "^2.0.0"
+
 performance-now@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@ -8856,6 +8898,18 @@ react-lifecycles-compat@^3.0.4:
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

+react-pdf@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-4.1.0.tgz#fcb874f28050fe9593c4e04652c7bff94bb1acf9"
+  integrity sha512-SYwkWc+vRQHfrpDls3DOgn4G+wT0mYGJRor20e28GPRW8VB+6o8WqZ4QZxsl50z+dKM7UscXFnK/02eN3NXi2g==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    lodash.once "^4.1.1"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    pdfjs-dist "2.1.266"
+    prop-types "^15.6.2"
+
 react-photo-view@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/react-photo-view/-/react-photo-view-0.4.0.tgz#62edf2c0bc3361e04110c04309b43c8d565e6c03"
@ -9477,6 +9531,14 @@ scheduler@^0.18.0:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@ -11042,6 +11104,14 @@ worker-farm@^1.7.0:
  dependencies:
    errno "~0.1.7"

+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 worker-rpc@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"