@embedpdf/plugin-view-manager (英语)

EmbedPDF的多份文件:同时显示打开的文档.

此插件与每个 EmbedPDF 框架包相伴而来 。 从您使用的那个导入 :

在反应中

视图管理器将文档排列成窗体,每个窗体都有自己的分页,像在 a 中分割编辑器 代码编辑器。 登记册 viewManagerPlugin(),然后使每个窗格有一个阶段:

panes.tsx

import { DocumentScope } from '@embedpdf/react/runtime';
import { RenderLayer } from '@embedpdf/react/render';
import { Stage } from '@embedpdf/react/stage';
import { useViewManager, useViewManagerState } from '@embedpdf/react/view-manager';
import { PaneTabs } from './PaneTabs';

export function Panes() {
  const views = useViewManager();
  const { panes, focusedPaneId } = useViewManagerState();

  return (
    <div className="panes">
      {panes.map((pane) => (
        <section key={pane.id} data-focused={pane.id === focusedPaneId} onFocus={() => views.setFocusedPane(pane.id)}>
          <PaneTabs pane={pane} />
          {pane.activeDocumentId && (
            <DocumentScope id={pane.activeDocumentId}>
              <Stage>{() => <RenderLayer />}</Stage>
            </DocumentScope>
          )}
        </section>
      ))}
    </div>
  );
}

views.splitPane(documentId); // the document in a new pane, beside the focused one
views.setActiveDocument(paneId, documentId); // show another of the pane's tabs
views.moveDocumentBetween(fromPaneId, toPaneId, documentId); // drag a tab to another pane
views.deletePane(paneId); // its documents move to another pane

打开的文档 documents.open() 土地在焦距上。 每通电话都列在下面 方法。 。 。 .

许可证

阿帕奇 - 2.0