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文件预览将会是下面的样子：

每一页下面都会将本页的纯文本显示出来

react-read-pdf

代码库
DOC