JZTXT

React中使用PDF文件预览插件react-pdf

发布时间 2023-08-31 17:44:01作者: 万般自然

为什么要用react-pdf

先不说其他场景，就说你在安卓浏览器预览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}：去除纯文本留白。
相信我，这俩配置你绝对会用到。