在react中在线预览pdf文件

下面👇两个插件都可以在线预览 pdf 文件，根据自己个人的喜好选择心仪的一种吧。下面说下 react-pdf 这个插件
react-pdf🏃
链接:https://www.npmjs.com/package/react-pdf
reactjs-pdf-reader🏃
链接:https://www.npmjs.com/package/reactjs-pdf-reader

1️⃣下包

npm install react-pdf 或 yarn add react-pdf

2️⃣ 引入

import react, { useState } from 'react'
import { Document, Page  } from  'react-pdf'
import { pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

function PdfComponent() {
	let [totalPage, setTotalPage] = useState(1)
	
	function onDocumentLoadSuccess({numPages}) {
	    setTotalPage(numPages)
	}
	
	return <>
		<Document
          file={require('../../pdfUrl.pdf')}  //文件路径
          onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用
          renderMode="canvas"   //定义文档呈现的形式 
      >
      	  // 显示全部的Pdf 文件
          {
              new Array(totalPage).fill('').map((item, index) => {
                  return <Page key={index} pageNumber={index + 1} />
              })
          }
          /**
          * 显示指定pdf文件
          * <Page width={300} pageNumber={1} />
          */
      </Document>
	</>
}

😇最简单的办法，就是把pdf文件转成图片，然后插入展示哟