移動端pdf預覽

移動端pdf預覽功能

最近開發移動端項目，項目中有預覽pdf功能，pc端與iOS可正常預覽，但安卓不可以直接預覽，需要下載。

1、使用到了react-pdf插件，插件地址https://github.com/wojtekmaj/react-pdf
2、

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages); // 獲取總頁數
  }

  return (
    <div>
      <Document
        file="somefile.pdf" // 文件地址
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} /> // 顯示當前頁
      </Document>
      <p>Page {pageNumber} of {numPages}</p> 
    </div>
  );
}

3、但是存在性能問題，pdf得渲染會阻塞頁面中的點擊事件，更改Document引入方式，使PDF文件將在單獨的線程中呈現而不會影響頁面性能。

import { Document } from 'react-pdf/dist/entry.webpack';