移动端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';