Naughty Programmer's Madness

    react-pdf-simple-viewer
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-pdf-simple-viewer

    License NPM typescript

    用于在 React 展示 PDF,使用起来非常简单。支持缩放、旋转、文本复制。

    安装

    #npm
    npm install --save react-pdf-simple-viewer
    
    #yarn
    yarn add react-pdf-simple-viewer

    ``

    快速开始

    例子 1

    import { Document, Page } from 'react-pdf-simple-viewer';
    import { useState } from 'react';
    
    const App = () => {
      const [pages, setPages] = useState<number[]>([]);
      return (
        <div>
          <Document
            URL="http://localhost:1234/123.pdf"
            onSuccess={async PDF => {
              const { numPages } = PDF;
              setPages(
                Array.from({ length: numPages })
                  .fill(0)
                  .map((val, index) => index + 1)
              );
            }}
          >
            {pages.map(value => {
              return <Page index={value} key={value} width={857} scale={1}></Page>;
            })}
          </Document>
        </div>
      );
    };
    
    ReactDOM.render(<App />, document.getElementById('root'));

    这里是Code Sandbox demo.

    例子 2

    配合 react-window(虚拟滚动提升性能) + react-virtualized-auto-sizer 实现全屏滚动预览。

    import React, { useState } from 'react';
    import { VariableSizeList as List } from 'react-window';
    import AutoSizer from 'react-virtualized-auto-sizer';
    import { Document, getPageHeight, Page } from 'react-pdf-simple-viewer';
    import { createGlobalStyle } from 'styled-components';
    
    // 给body设置高度,AutoSizer才可以获取到实际高度
    const GlobalStyle = createGlobalStyle`
      body {
        margin: 0;
      }
      html,
      body,
      #root {
      height: 100%;
      overflow-x: hidden;
      background: #f2f5f8;
    }
    `;
    
    const Row: React.FC<{
      index: number;
      style: React.CSSProperties;
      data: number;
    }> = ({ style, index, data }) => {
      return (
        <div style={style}>
          {/* //注意,这里我们给每页增加了7px的边框,高度计算那边也需要计算上 */}
          <Page
            index={index + 1}
            width={data}
            style={{ margin: '0px auto', borderBottom: 'solid 7px #f2f5f8' }}
          ></Page>
        </div>
      );
    };
    
    const Example2: React.FC = () => {
      const WIDTH = 864;
      const [pagesHeight, setPagesHeight] = useState<number[]>([]);
      async function successHandler(pdf: any) {
        const { numPages } = pdf;
        const array = Array.from({ length: numPages }).fill(0);
        // 计算每一页的高度
        const pagesHeight = await Promise.all(
          array.map((i, index) => {
            return getPageHeight(pdf, { index: index + 1, width: WIDTH });
          })
        );
        setPagesHeight(pagesHeight);
      }
    
      function getItemSize(index: number): number {
        // 为什么加7看Row组件注释
        return pagesHeight[index] + 7;
      }
    
      return (
        <>
          <GlobalStyle></GlobalStyle>
          <AutoSizer>
            {({ height, width }) => (
              <Document URL="/0410100.pdf" onSuccess={successHandler}>
                {pagesHeight.length !== 0 && (
                  <List
                    height={height}
                    width={width}
                    itemCount={pagesHeight.length}
                    itemSize={getItemSize}
                    itemData={WIDTH}
                  >
                    {Row}
                  </List>
                )}
              </Document>
            )}
          </AutoSizer>
        </>
      );
    };
    
    export default function App() {
      return <Example2 />;
    }

    这里是Code Sanbox demo.

    文档

    Document 组件的 prop 类型:

    URL:

    • Type: string
    • Required: true
    • Description: 获取 PDF 资源的链接

    onSuccess:

    • Type: function
    • Required: false
    • Description: PDF 加载成功时调用

    onError:

    • Type: function
    • Required: false
    • Description: PDF 加载失败时调用

    Page 组件的 prop 类型:

    index:

    • Type: number
    • Required: false
    • Description: 需要渲染页面的索引
    • Default: 1

    width:

    • Type: number
    • Required: false
    • Description: 页面的宽度,单位默认 px
    • Default: 默认为读取 PDF 页面 viewport 的宽度

    scale:

    • Type: number
    • Required: false
    • Description: 控制页面缩放比例
    • Default: 1

    hideTextLayer:

    • Type: boolean
    • Required: false
    • Description: 控制是否隐藏文本层
    • Default: false

    style:

    • Type: Object
    • Required: false
    • Description: 自定义 Page 组件样式
    • Default: {}

    Install

    npm i react-pdf-simple-viewer

    DownloadsWeekly Downloads

    2

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    302 kB

    Total Files

    24

    Last publish

    Collaborators

    • cdxcdx