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
相關文章
- react-pdf預覽線上PDF的使用React
- react實現移動端PDF線上預覽外掛React
- html中線上預覽pdf檔案之pdf線上預覽外掛HTML
- react 的pdf預覽外掛應用React
- Jquery Media外掛使用,解決線上預覽及開啟PDF檔案jQuery
- 使用PDF.JS外掛在HTML中預覽PDF檔案JSHTML
- uniapp 線上預覽pdf 或者 檔案APP
- WordPress線上檢視PDF外掛:PDFjs ViewerJSView
- 在electron下實現PDF線上預覽功能
- 直播平臺搭建,使用vue-pdf 實現pdf線上預覽並且自定義預覽框高度Vue
- 記一次關於pdf 下載需求變更到 pdf 線上預覽
- vscode 預覽外掛 just-previewVSCodeView
- wPaint線上繪圖外掛AI繪圖
- 結合 Laravel 實現檔案(PDF、world、Excel 之類)線上預覽?LaravelExcel
- IconFontPreview——一款預覽IconFont的外掛View
- LUT Gallery怎麼用?LUTS調色預設預覽管理外掛使用教程 (FCPX外掛)
- kkFileView檔案線上預覽View
- Office文件線上預覽方案
- 釋出 vscode 外掛 Cnblogs Client For VSCode 預覽版VSCodeclient
- Vue專案中使用基於pdf.js的vue-pdf外掛在pc瀏覽器下閱覽PDF檔案VueJS瀏覽器
- kkFileView預覽檔案 指定預覽方式為pdfView
- 前端奇淫技術:圖片壓縮、方向糾正、預覽、上傳外掛前端
- MyEclipse 2017線上安裝SVN外掛Eclipse
- CSDN專屬idea外掛上線啦~~Idea
- java實現文件線上預覽工具Java
- 常用瀏覽器外掛瀏覽器
- 號外號外, react-native-image-picker react-native外掛突然掛掉應急處理React
- tampermonkey外掛指令碼油猴外掛下載 - 篡改猴瀏覽器外掛指令碼瀏覽器
- React 優秀外掛記錄React
- 利用SelectPdf外掛將網頁生成PDF網頁
- 如何在Mac上使用預覽對PDF進行電子簽名Mac
- [外掛擴充套件]左右markdown編輯器0.2(更新同步預覽)套件
- 聊天富文字外掛,一個基於react的富文字外掛React
- FCPX外掛:直線圖形矩形線條路徑動畫預設動畫
- Enfocus PitStop Pro 2022 for Mac(pdf增強外掛)Mac
- Mac pdf增強外掛:Enfocus PitStop Pro 2021Mac
- Enfocus PitStop Pro 2021 for Mac(pdf增強外掛)Mac
- pdf增強外掛:Enfocus PitStop Pro 2022 for MacMac