React中使用PDF文件预览插件,解决”需要下载后预览“问题

背景

先不说其他场景,就说你在安卓浏览器预览PDF文件的时候,可能遇到过一个问题:需要下载后预览。这个问题在苹果浏览器上倒是没有。
我翻阅古籍后,发现react-pdf可以解决这个问题。

解决方案

react-pdf(某些浏览器不兼容)
react-read-pdf(推荐)

react-pdf

注意事项

首先说个重要的事情:你在搜索react-pdf官网的时候,大概率是会搜索到react-pdf/renderer这个插件的官网,这是PDF生成插件,我们做预览需要用到的是:react-pdf
下面分别放上两个插件的地址:

官网

react-pdf:https://projects.wojtekmaj.pl/react-pdf/
react-pdf/renderer:https://react-pdf.org/

Github

react-pdf:https://github.com/wojtekmaj/react-pdf
react-pdf/renderer:https://github.com/diegomura/react-pdf

react-pdf的使用

const [numPages, setNumPages] = useState(null);

function onDocumentLoadSuccess({ numPages }) {
  setNumPages(numPages);
}

<Document file={文件链接} onLoadSuccess={onDocumentLoadSuccess}>
  {Array.from(new Array(numPages), (el, index) => (
    <Page
      key={`page_${index + 1}`}
      pageNumber={index + 1}
      renderTextLayer={false}
      renderAnnotationLayer={false} />
  ))}
</Document>
.react-pdf__Page__canvas {
  margin: 0 0 0 -30px;
  width: 400px !important;
  height: 400px !important;
}

renderTextLayer={false}:不显示纯文本。
renderAnnotationLayer={false}:去除纯文本留白。
不显示纯文本还有另外一种方式:

import 'react-pdf/dist/esm/Page/TextLayer.css';

相信我,这俩配置你绝对会用到。如果没有上面两个配置,你的PDF文件预览将会是下面的样子:
image
每一页下面都会将本页的纯文本显示出来

react-read-pdf

代码库
DOC

posted @ 2023-08-31 17:38  万般自然  阅读(1081)  评论(0编辑  收藏  举报