Next.js PDFtron Webviewer - ReferenceError: window is not defined

Question

我正在尝试在我的 nextjs 静态页面上创建一个 PDF 查看器，但我不知道如何做！希望你们能帮我解决这个错误或展示另一种方法来做到这一点。（我是 Next.js 的新手）我正在关注这个工作示例 here

index.js

import SiteLayout from "../../components/SiteLayout";
import React from 'react';
import ReactDOM from "react-dom";
import Viewer from "../resume/viewer.js";

export default function Resume({ resume }) {
  return (   
    <div>
      <Viewer />
    </div> 
  );
}

viewer.js

import React, { useRef, useEffect } from "react";
import WebViewer from "@pdftron/webviewer";

const Viewer = (props) => {
  const viewer = useRef(null);

  useEffect(() => {       
    WebViewer({
      path: "/lib",
      initialDoc: "/pdf/GustavoMorilla.pdf"
    }, viewer.current);
  }, []);

  return (
    <div className="Viewer">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

export default Viewer;

Answer 1

WebViewer 需要 window 对象才能工作。在 nextjs 中有一个预呈现阶段服务器端，而在那一端 window 未定义。

要解决您的问题，您可以在 viewer.js

中使用 next/dynamic

import dynamic from 'next/dynamic';
const WebViewer = dynamic(() => import('@pdftron/webviewer'), {ssr: false});

或者，您可以使用动态导入

在 index.js 中导入 Viewer

import dynamic from 'next/dynamic';
const Viewer = dynamic(() => import('../resume/viewer.js'), {ssr: false});

Answer 2

当您导入 @pdftron/webviewer 时，一些代码是运行ning，即使您没有调用 WebViewer 函数。 useEffect 回调在 SSR 中没有运行。您可以在那里使用 Dynamic Imports 来导入模块：

useEffect(() => {    
    import('@pdftron/webviewer')
     .then(WebViewer) => {
        WebViewer({
          path: "/lib",
          initialDoc: "/pdf/GustavoMorilla.pdf"
        }, viewer.current);
    }) 
}, []);

Next.js PDFtron Webviewer - ReferenceError: window is not defined

Next.js PDFtron Webviewer - ReferenceError: window is not defined

javascript

reactjs

pdftron

react-dom

next.js