如何在react-pdf-viewer中创建自定义按钮？

在react-pdf-viewer中创建自定义按钮可以通过以下步骤实现：

首先，确保已经安装了react-pdf-viewer库。可以使用以下命令进行安装：

npm install react-pdf-viewer

在你的React组件中引入所需的库和样式：

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

创建一个自定义按钮组件，可以使用React的函数组件来实现。在该组件中，你可以使用HTML和CSS来定义按钮的外观和样式：

import React from 'react';

const CustomButton = ({ onClick }) => {
  return (
    <button onClick={onClick} className="custom-button">
      自定义按钮
    </button>
  );
};

export default CustomButton;

在你的PDF查看器组件中使用自定义按钮组件。你可以使用renderToolbar属性来自定义工具栏，然后在工具栏中添加你的自定义按钮：

import React from 'react';
import { Viewer, RenderToolbar } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import CustomButton from './CustomButton';

const MyPDFViewer = () => {
  const renderToolbar = (toolbarSlot) => {
    return (
      <div>
        <RenderToolbar toolbarSlot={toolbarSlot} />
        <CustomButton onClick={() => console.log('自定义按钮被点击')} />
      </div>
    );
  };

  return (
    <div>
      <Viewer fileUrl="/path/to/your/pdf/file.pdf" renderToolbar={renderToolbar} />
    </div>
  );
};

export default MyPDFViewer;

在上述代码中，我们通过renderToolbar函数自定义了工具栏，并在工具栏中添加了自定义按钮组件CustomButton。你可以根据需要修改按钮的样式和功能。

这样，你就可以在react-pdf-viewer中创建自定义按钮了。记得根据实际情况修改CustomButton组件的功能和样式。