react-pdf怎么实现操作pdf，例如高亮显示，划线，标注

Question

问题：目前已使用react-pdf 实现上传pdf并分页展示，但是还想编辑pdf，怎么实现呀

代码如下：

import React from 'react'
// 引入组件
import 'antd/dist/antd.css';
// 引入样式
import styles from './index.module.scss'
import 'pdfjs-dist/web/pdf_viewer.css';
import { Input, message, Pagination, Upload } from 'antd'
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const Dragger = Upload.Dragger;
const { Search } = Input;
interface Props {
}

interface State {
  pdf: string,
  base64:any,
  numPages: number,
  page: number,
  displayPagination: string
}

class BrowserPdf extends React.PureComponent<Props, State> {
  constructor(props: Props){
    super(props)
    this.state = {
      pdf: '',
      base64: '',
      numPages: 1,
      page: 1,
      displayPagination: 'none'
    }
  }

  componentDidMount () {
  }

  readPdf(file: any) {
    // pdf.js无法直接打开本地文件,所以利用FileReader转换
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e: any) => {
      let base64 = e.target.result;
      this.setState({
        base64: base64
      })
    }
  }

  selectMenu = (menu:any) => {
    console.log(menu.key)
  }

   //numPages 是pdf文件的总页数
  onLoadSuccess= (param: any) => {
    this.setState({ 
      numPages: param.numPages,
      displayPagination: ''
     });
  };

  pageChange = (page:number, pageSize: number) => {
    console.log(page, pageSize)
    this.setState({
      page
    })
  }

  onSearch = (value: any) => {
    console.log(value);
  }

  render() {
    console.log(this.state)
    const self = this;
    const uploadProps = {
      name: 'file',
      accept: '.pdf',
      action: '',
      onChange(info: any) {
        const status = info.file.status;
        if (status !== 'done') {
          // self.setState({ loading: true });
        }
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          // self.setState({ loading: false });
          message.success(`${info.file.name} 导入成功`);
          // 解析 pdf 文件
          // self.readPdf(info.file.originFileObj);
          console.log(info.file.originFileObj)
        } else if (status === 'error') {
          console.log(`${info.file.name} 导入失败`);
          self.readPdf(info.file.originFileObj);
        }
      },
    };
    return (
      <div className={`${styles.pdfClass}`}>
        <Dragger {...uploadProps} id="document">
          <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
          <p className="ant-upload-hint">支持扩展名：.pdf</p>
          <div id='pdf-container' style={{ height: 0, overflow: 'hidden' }}></div>
        </Dragger>
        <Search placeholder="关键字" onSearch={this.onSearch} style={{width: '30%', margin: "20px 0 20px 10% "}} />
        {/* <Input  placeholder='关键字'></Input> */}
        <div className={`${styles.pdfContent}`}>
          <Document
            file={this.state.base64}
            options={{
              cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
              cMapPacked: true,
              workerSrc: '/pdf.worker.js'
            }}
            renderMode='svg'
            onLoadSuccess={this.onLoadSuccess}
            onItemClick={({ pageNumber }) => console.log('Clicked an item from page ' + pageNumber + '!')}
          >
            {/* {
              new Array(this.state.numPages + 1).fill('').map((item, index) => {
                return <div><Page width={900} key={index} pageNumber={index}/><br/></div>;
              })
            }  */}
            <div><Page width={900} key={1} pageNumber={this.state.page} /><br/></div>
          </Document>
        </div>
        <Pagination
          simple
          defaultCurrent={1} 
          total={this.state.numPages*10} 
          style={{ backgroundColor: "#eee",zIndex: 5, marginLeft: "300px", display: this.state.displayPagination, position: 'fixed', bottom: "30px" }}
          onChange={this.pageChange}
        />
        <br></br>
      </div>
    )
  }
}

Answer 1

在图层上 盖一层 canvas