@abstractops/react-doc-viewer 中文文档教程

Question

react-doc-viewer

Contents

• Current Renderable File Types
• Installation
• Core
• Usage
• Basic
• Included Renderers
• Custom Renderer
• Themed
• Styling
  • CSS Class
  • CSS Class Default Override
  • React Inline
  • StyledComponent
• Config
• Contributing
• Creating a Renderer Plugin
• Overriding Header Component
• API

Current Renderable File Types

Extension	MIME Type	Available
bmp	image/bmp	✓
doc	application/msword	✓
docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document	✓
htm	text/htm	✓
html	text/html	✓
jpg	image/jpg	✓
jpeg	image/jpeg	✓
pdf	application/pdf	✓
png	image/png	✓
ppt	application/vnd.ms-powerpoint	✓
pptx	applicatiapplication/vnd.openxmlformats-officedocument.presentationml.presentation	✓
tiff	image/tiff	✓
txt	text/plain	✓
xls	application/vnd.ms-excel	✓
xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	✓

Installation

Core

 npm i react-doc-viewer
 # or
 yarn add react-doc-viewer

Usage

警告 - 默认情况下，组件高度将扩展和收缩到当前加载的文件。 宽度将扩展以填充父级。

Basic

DocViewer 至少需要一组文档对象才能运行。 每个文档对象都必须有一个文件的 uri，可以是返回文件的 url，也可以是本地文件。

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" },
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return <DocViewer documents={docs} />;
}

Included Renderers

使用包含的渲染器。 DocViewerRenderers 是所有包含的呈现器的数组。

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

<DocViewer
  pluginRenderers={DocViewerRenderers}
  {/* ... */}
/>;

或者您可以导入单独的渲染器。

import DocViewer, { PDFRenderer, PNGRenderer } from "react-doc-viewer";

<DocViewer
  pluginRenderers={[PDFRenderer, PNGRenderer]}
  {/* ... */}
/>;

Custom Renderer

要创建一个自定义渲染器，它只存在于您的项目中。

import React from "react";
import DocViewer from "react-doc-viewer";

const MyCustomPNGRenderer: DocRenderer = ({
  mainState: { currentDocument },
}) => {
  if (!currentDocument) return null;

  return (
    <div id="my-png-renderer">
      <img id="png-img" src={currentDocument.fileData as string} />
    </div>
  );
};

MyCustomPNGRenderer.fileTypes = ["png", "image/png"];
MyCustomPNGRenderer.weight = 1;

并将其提供给 DocViewer > Array 中的 pluginRenderers。

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

<DocViewer
  pluginRenderers={[MyCustomPNGRenderer]}
  documents={
    [
      // ...
    ]
  }
/>;

Custom File Loader

如果您需要阻止 react-doc-viewer 实际加载文件。 你可以用回调来装饰你的自定义渲染器来做你想做的事。 例如，自己将文件加载到 iFrame 中。

MyCustomPNGRenderer.fileLoader = ({
  documentURI,
  signal,
  fileLoaderComplete,
}) => {
  myCustomFileLoaderCode().then(() => {
    // Whenever you have finished you must call fileLoaderComplete() to remove the loading animation
    fileLoaderComplete();
  });
};

Themed

您可以为主题对象提供一个或所有可用属性。

<DocViewer
  documents={docs}
  theme={{
    primary: "#5296d8",
    secondary: "#ffffff",
    tertiary: "#5296d899",
    text_primary: "#ffffff",
    text_secondary: "#5296d8",
    text_tertiary: "#00000099",
    disableThemeScrollbar: false,
  }}
/>

Styling

应用于 组件的任何样式都直接应用于主 div 容器。

- CSS Class

<DocViewer documents={docs} className="my-doc-viewer-style" />

- CSS Class Default Override

每个组件/div 都有一个 DOM id，可用于设置文档查看器任何部分的样式。

#react-doc-viewer #header-bar {
  background-color: #faf;
}

- React Inline

<DocViewer documents={docs} style={{width: 500, height: 500}} />

- StyledComponent

import styled from "styled-components";
//...
<MyDocViewer documents={docs} />;
//...
const MyDocViewer = styled(DocViewer)`
  border-radius: 10px;
`;

Config

您可以提供一个配置对象，它根据需要配置组件的各个部分。

<DocViewer documents={docs} config={{
 header: {
  disableHeader: false,
  disableFileName: false,
  retainURLParams: false
 }
}} />

Contributing

Creating a Renderer Plugin

第 1 步 - 在 src/plugins 中创建一个新文件夹。

例如 src/plugins/jpg

在此文件夹中，创建一个 Renderer React Typescript 文件。

例如 index.tsx

第 2 步 - 在 JPGRenderer 内部，导出 DocRenderer 类型的功能组件

import React from "react";
import { DocRenderer } from "../../types";

// Be sure that Renderer correctly uses type DocRenderer
const JPGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
  if (!currentDocument) return null;

  return (
    <div id="jpg-renderer">
      <img id="jpg-img" src={currentDocument.fileData as string} />
    </div>
  );
};

export default JPGRenderer;

// List the MIME types that this renderer will respond to
JPGRenderer.fileTypes = ["jpg", "jpeg", "image/jpg", "image/jpeg"];

// If you have more than one renderer for the same MIME type, use weight. higher is more preferable.
// Included renderers have a weight of zero
JPGRenderer.weight = 1;

如果您正在创建一个新的渲染器，还更新 src/plugins/index.ts 并导入新的渲染器文件，并将其导出为 DocViewerRenderers Array 的一部分。

// ...
import JPGRenderer from "./jpg";

export const DocViewerRenderers = [
  // ...
  JPGRenderer,
];

Overriding Header Component

您可以将回调函数传递给返回 React 元素的 config.header.overrideComponent。 该函数的参数将被填充并可用，该函数也将在 mainState 更新时重新调用。 参数包括来自主组件的状态对象，以及previousDocument 和nextDocument 的文档导航函数。

示例：

const myHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {
    if (!state.currentDocument || state.config?.header?.disableFileName) {
      return null;
    }

    return (
      <>
        <div>{state.currentDocument.uri || ""}</div>
        <div>
          <button
            onClick={previousDocument}
            disabled={state.currentFileNo === 0}
          >
            Previous Document
          </button>
          <button
            onClick={nextDocument}
            disabled={state.currentFileNo >= state.documents.length - 1}
          >
            Next Document
          </button>
        </div>
      </>
    );
  };

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      /**/
    }
  }
  config={{
    header: {
      overrideComponent: myHeader;
      },
    },
  }
/>

API

---

DocViewer props

name	type
documents	IDocument[]
className?	string
style?	React.CSSProperties
config?	IConfig
theme?	ITheme
pluginRenderers?	DocRenderer[]

---

IDocument

name	type
uri	string
fileType?	string
fileData?	string | ArrayBuffer - Used Internally - Ignored if passed into props

---

IConfig

name	type
header?	IHeaderConfig

---

IHeaderConfig

name	type
disableHeader?	boolean
disableFileName?	boolean
retainURLParams?	boolean
overrideComponent?	IHeaderOverride

---

IHeaderOverride () => ReactElement<any, any> | null

name	type
state	IMainState
previousDocument	() => void
nextDocument	() => void
returns	ReactElement<any, any> | null

---

ITheme

name	type
primary?	string
secondary?	string
tertiary?	string
text_primary?	string
text_secondary?	string
text_tertiary?	string
disableThemeScrollbar?	boolean

---

DocRenderer extends React.FC\<DocRendererProps>

name	type
fileTypes	string[]
weight	number
fileLoader?	FileLoaderFunction | null | undefined

---

FileLoaderFunction

(props: FileLoaderFuncProps) => 空白

---

FileLoaderFuncProps

name	type
documentURI	string
signal	AbortSignal
fileLoaderComplete	FileLoaderComplete

---

FileLoaderComplete

name	type
fileReader	FileReader

---

DocRendererProps

name	type
mainState	IMainState

---

IMainState

name	type
currentFileNo	number
documents	IDocument[]
documentLoading?	boolean
currentDocument?	IDocument
rendererRect?	DOMRect
config?	IConfig

---