React-pdf 在动态路由器 [Nextjs] 中不起作用

问题描述

我在 Nextjs 应用程序中使用 react-pdf npm 包。

下面是我的代码：

import { dataBase64 } from "constants/index";
import React,{ useState } from 'react';
// import default react-pdf entry
import { Document,Page,pdfjs } from "react-pdf";
// import pdf worker as a url,see `next.config.js` and `pdf-worker.js`
import workerSrc from "../../../pdf-worker";

pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
export default function PdfViewer({ data }) {
  const [numPages,setNumPages] = useState(null);
  const [pageNumber,setPageNumber] = useState(1); //setting 1 to show fisrt page

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
    setPageNumber(1);
  }

  function changePage(offset) {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }

  function prevIoUsPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }

  return (
    <>
      <Document
        file={`data:application/pdf;base64,...`}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
    </>
  );
}

然后我在没有动态路由器的普通路由器中使用这个组件，它运行完美！ 例如在这样的页面使用：

pages/about.js

但是如果我在这样的动态路由器中使用它就不起作用：

news/[title]/[id]

在此页面我使用 SSG。

注意： 我使用 dynamic 模块导入此组件并设置 ssr: false

我错过了什么吗？

对于另一个 npm 包有什么解决方案或建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）