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