如何使用React-PDF从React中的Firebase存储中查看PDF DOC？

Question

我想从我的React应用中的Firebase存储中查看PDF文件，问题是我想在加载页面后查看该文件，并且“ GetDownloadurl” Firebase方法是异步。

我试图做这样的事情：

    const MyPage = (props) => {
      const [numPages, setNumPages] = useState(null)
      const [pageNumber, setPageNumber] = useState(1)
      const [url, setURL] = useState('')
    
     const showFile = async () => {
        return await storage.ref(props.props.sheetMusicRef).getDownloadURL()
      }
    
    return   <Document file={showFile}>
              <Page pageNumber={pageNumber} />
            </Document>
}

没有成功。

Answer 1

今天我做了类似的事情，我想简单地从firebase存储中获取PDF，同时显示加载程序，然后渲染文件。我决定不要为自己的用例中使用React-PDF，因为我想在整个视口上嵌入文件。如果您想专门查看我建议的解决方案，请跳到下一个标题。

我的解决方案

此组件从Firebase存储中获取PDF，然后将文件嵌入整个视口上。为了确保我没有能够滚动或下面滚动的能力，可以模仿浏览器中直接打开文件的行为，我使用了NPM的“身体旋转锁” - 包装。我还将MUI用于样式组件。因此，如果您任何人都来此帖子并想要一个工作的全屏PDF浏览器，从firebase存储中获取PDF并显示加载程序，那么您就可以了：

import React from "react";
import { Box, Typography, useMediaQuery } from "@mui/material";
import { FC, useEffect, useState } from "react";
import { useTheme } from "../ThemeProvider";
import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
import { Seek } from "react-loading-indicators";
import { getDownloadURL, ref } from "firebase/storage";
import { storage } from "../firebaseConfig";

const LandingPage: FC = (props) => {
  const targetRef = React.createRef();
  const [isLoading, setIsLoading] = useState(true);
  const [pdf, setPdf] = useState(null);

  useEffect(() => {
    disableBodyScroll(targetRef);

    getDownloadURL(ref(storage, "firebase_storage_path.pdf"))
      .then((url) => {
        setPdf(url);
        setInterval(() => setIsLoading(false), 500);
      })
      .catch(() => setIsLoading(false));

    return () => {
      clearAllBodyScrollLocks();
    };
  }, []);

  return (
     <Box
     ref={targetRef}
     display="flex"
     justifyContent="center"
     alignItems="center"
     sx={{
       height: "100vh",
       width: "100vw",
     }}
   >
     {isLoading ? (
       <Seek color="#000" size="small" />
     ) : !pdf ? (
       <Typography variant="h4">Oops, something went wrong</Typography>
     ) : (
       <embed type="application/pdf" width="100%" height="100%" src={pdf} />
     )}
   </Box>
  );
};
export default LandingPage;

解决问题的解决方案，具体来说，

我已经修改了您提供的代码，并且提出了一些可以按照您想要的方式奏效的更改。这显示了一个加载程序，同时获取文件，从firebase存储中获取文件，并显示出错误消息是否出了问题，或使用React-PDF加载PDF。

import { useEffect, useState } from "react";
import React from "react";
import { Seek } from "react-loading-indicators";
import { getDownloadURL, ref } from "firebase/storage";
import { storage } from "../firebaseConfig";
import { Document, Page } from "react-pdf";

const MyPage = (props) => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [isLoading, setIsLoading] = useState(true);
  const [url, setURL] = useState(null);

  useEffect(() => {
    getDownloadURL(ref(storage, "firebase_storage_path.pdf"))
      .then((url) => {
        setURL(url);
        // Could include a way of updating numPages here
        setInterval(() => setIsLoading(false), 500); // Just for the sake of showing the loader
      })
      .catch(() => setIsLoading(false));

    return () => {};
  }, []);

  if (isLoading) return <Seek color="#000" size="small" />; // Show loader
  else {
    if (!url)
      return <p>Oops, something went wrong</p>; // If catched error from fetch
    else
      return (
        <Document file={url}>
          <Page pageNumber={pageNumber} />
        </Document>
        // Could also include a way of switching page number based on numPages
      );
  }
};
export default MyPage;