react 在线查看PDF

最新推荐文章于 2024-09-02 18:27:15 发布

HURRICANE_FAST

最新推荐文章于 2024-09-02 18:27:15 发布

阅读量824

点赞数

分类专栏：前端开发文章标签： react

本文链接：https://blog.csdn.net/qq_34703156/article/details/117442272

版权

前端开发专栏收录该内容

28 篇文章 1 订阅

订阅专栏

官方文档 https://www.npmjs.com/package/react-pdf

git地址： https://github.com/mozilla/pdf.js

偶尔会出现版本不匹配的情况 根据tag 下载对应版本

import React from 'react'
import { Modal, Button, Pagination } from 'antd'
import PageWrapper from 'components/PageWrapper'
import { SERVER } from '../../configs/service'
import { Document, Page } from 'react-pdf'
import { pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

export default function FlowChart(props) {
  const { onCancel, url, visibleChart } = props
  // const [pageNumber, setPageNumber] = React.useState(1)
  const [page, setPage] = React.useState(1)
  const [totalPage, setTotalPage] = React.useState(0)
  const onDocumentLoadSuccess = ({ numPages }) => {
    setTotalPage(numPages)
  }
  const handelOnChange = pages => {
    setPage(pages)
  }
  return (
    <PageWrapper>
      <Modal
        visible={visibleChart}
        title={'PDF'}
        onCancel={onCancel}
        cancelText="取消"
        maskClosable={false}
        destroyOnClose={true}
        onOk={onCancel}
        width={'90%'}
        footer={<Button onClick={onCancel}>取消</Button>}
      >
        <a href={SERVER + '/' + url}>请点击下载查看</a>
        <Document
          file={SERVER + '/' + url}
          onLoadSuccess={onDocumentLoadSuccess}
          renderMode="canvas" //定义文档呈现的形式
          loading="正在努力加载中" //加载时提示语句
          externalLinkTarget="_blank"
         
        >
          <Page scale={1} pageIndex={page} />
        </Document>

        <Pagination
          onChange={handelOnChange}
          total={totalPage * 10}
          current={page}
        />
      </Modal>
    </PageWrapper>
  )
}

不分页现实全部PDF

import React from 'react'
import { Modal, Button } from 'antd'
import PageWrapper from 'components/PageWrapper'
import { SERVER } from '../../configs/service'
import { Document, Page } from 'react-pdf'
import { pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
//pdfjs.GlobalWorkerOptions.workerSrc = '../../pages/Home/pdf.worker.js'

export default function FlowChart(props) {
  const { onCancel, url, visibleChart } = props

  const [totalPage, setTotalPage] = React.useState([])
  const onDocumentLoadSuccess = ({ numPages }) => {
    let arr = []
    for (let i = 0; i < numPages; i++) {
      arr.push(i)
    }
    setTotalPage(arr)
  }

  return (
    <PageWrapper>
      <Modal
        visible={visibleChart}
        title={'PDF'}
        onCancel={onCancel}
        cancelText="取消"
        maskClosable={false}
        destroyOnClose={true}
        onOk={onCancel}
        width={'75%'}
        footer={<Button onClick={onCancel}>取消</Button>}
      >
        <a href={SERVER + '/' + url}>请点击下载查看</a>
        <div style={{ margin: 'auto' }}>
          <Document
            file={SERVER + '/' + url}
            onLoadSuccess={onDocumentLoadSuccess}
            renderMode="canvas" //定义文档呈现的形式
            loading="正在努力加载中" //加载时提示语句
            externalLinkTarget="_blank"
            noData={false}
          >
            {totalPage.map(t => (
              <div key={t} style={{ margin: 'auto' }}>
                <Page scale={1.5} pageIndex={t} />
              </div>
            ))}
          </Document>
        </div>
      </Modal>
    </PageWrapper>
  )
}