react線上預覽pdf，外掛react-pdf

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() {
	const [totalPage, setTotalPage] = useState(1)
	
	function onDocumentLoadSuccess({numPages}) {
	    setTotalPage(numPages)
	}
	
	return <>
		<Document
          file={'pdfText.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>
	</>
}

具體配置
?
?
?
react-pdf?
連結:https://www.npmjs.com/package/react-pdf
??? reactjs-pdf-reader也是可以的哦
連結:https://www.npmjs.com/package/reactjs-pdf-reader

? 問題

將 pdf 檔案放在專案src資料夾中並引入

頁面上會顯示 Failed to load PDF file. 無法載入PDF檔案
?發現 pdf 檔案 放在專案public資料夾中，直接 a.pdf檔案引入是可以的。
連結:https://www.jianshu.com/p/83d540245b07