我正在尝试使用 apryse docx 编辑器中的 pdftron 我可以正常使用 docx 编辑器,但我不断收到如下图所示的错误
这些是我的代码
wordeditor.tsx
"use client";
import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";
// const WebViewer = dynamic((): any => import('@pdftron/webviewer'), {ssr: false});
const licenseKey =
"";
const WordEditor = () => {
const viewerDiv = useRef<any>(null);
useEffect(() => {
WebViewer(
{
path: "/webviewer/lib",
licenseKey: licenseKey,
initialDoc:
"https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.docx",
enableOfficeEditing: true,
},
viewerDiv.current
).then((instance) => {
const { documentViewer } = instance.Core;
// you can now call WebViewer APIs here...
});
}, []);
return (
<div className="webviewer" ref={viewerDiv} style={{ height: "100%" }}></div>
);
};
export default WordEditor;
然后将其作为组件插入我的 page.tsx
import dynamic from 'next/dynamic';
const WebViewer = dynamic((): any => import('./wordeditor'), {ssr: false});
const WordEditor = () => {
return (
<div className='w-full h-full'>
<WebViewer/>
</div>
);
}
export default WordEditor;
任何人都可以帮我解决这个错误吗?我已经尝试过在其他问题中搜索,但我仍然无法修复此错误,特别是在 React TypeScript Next JS 中
至于我使用的套餐
先谢谢了。
更新。我通过将 WebViewer 承诺更改为异步解决了这个问题,它的工作原理是将其更改为异步的代码:
"use client";
import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";
const licenseKey =
"";
const WordEditor = () => {
const viewer = useRef<any>(null);
useEffect(() => {
const callView = async () => {
try {
const docx = await WebViewer(
{
path: "/webviewer/lib",
licenseKey: licenseKey,
enableOfficeEditing: true,
},
viewer.current
)
const { Core, UI } = docx;
const { documentViewer, annotationManager, Annotations, Tools } = Core;
} catch (error) {
console.log('viewer error ==> ', error)
}
}
callView()
}, []);
return (
<div id="viewer" className="webviewer" ref={viewer} style={{ height: "100%" }}></div>
);
};
干杯!
该问题很可能是由于 React 18 中的更改导致 useEffect 在开发版本中被调用两次。 您可以阅读有关此内容的更多信息 https://apryse.com/blog/two-instances-of-webviewer-warning-and-fix