線上直播系統原始碼，實現翻頁載入、下拉滾動載入

線上直播系統原始碼，實現翻頁載入、下拉滾動載入

在檔案中引入並使用

從react-pdf引入會有不知名錯誤，react-pdf/dist/esm/entry.webpack並沒有。

onLoadSuccess可以獲取對應載入pdf的總頁數，此處用函式onDocumentLoadSuccess儲存為numPages。

Page設定屬性pageNumber就是對應的pdf頁數，引數基於1，這裡展示第一頁，可以通過新增按鈕修改pageNumber的值達到切換pdf頁面的效果。

Document的file就是訪問pdf路徑，如果是本地路徑也許不會有跨域問題，如果是線上pdf，開發時建議加上字首進行proxy代理，專案上線後同樣用nginx做一樣的代理即可。此處代理/pdf/，將/pdf/後面請求的pdf檔案轉發去線上檔案所在地址。

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
export default class index extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  };
  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };
  render() {
    const { pageNumber } = this.state;
    return (
      <div>
        <Document
          file={'/pdf/555.pdf'}
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page width={window.screen.width} pageNumber={pageNumber} />
        </Document>
        <button
          onClick={() => {
            pageNumber > 1
              ? this.setState({ pageNumber: pageNumber - 1 })
              : alert('前面沒有了');
          }}
        >
          上一頁
        </button>
        <button
          onClick={() => {
            pageNumber < numPages
              ? this.setState({ pageNumber: pageNumber + 1 })
              : alert('後面沒有了');
          }}
        >
          下一頁
        </button>
      </div>
    );
  }
}

下拉展示

其實就是一口氣遍歷渲染出來，建立了一個長度為總頁數numPages的陣列進行map，用index做頁數的請求，不過index基於0，pageNumber基於1，因此index需要+1。

示例比較粗糙，一口氣展示，展示較少內容的pdf時沒有什麼問題，如果pdf頁數過多會出現效能問題，可以自行考慮載入方法（例如每滑動十頁進行下面十頁的載入）。

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
export default class index extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  };
  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };
  render() {
    const { pageNumber, numPages } = this.state;
    return (
      <div>
        <Document
          file={'/pdf/555.pdf'}
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          {new Array(numPages).fill('').map((cur, index) => (
            <Page
              key={index}
              width={window.screen.width}
              pageNumber={index + 1}
            />
          ))}
        </Document>
      </div>
    );
  }
}

以上就是線上直播系統原始碼，實現翻頁載入、下拉滾動載入， 更多內容歡迎關注之後的文章