如何使用URL在React应用中将PDF显示为图像（） _React

本文概述

Java脚本
Java脚本
Java脚本

如果我们使用fetch方法, 则它将打开一个用于显示PDF文件的新窗口, 并允许用户下载PDF。但是, 如果你不希望这样做, 那么有一种方法可以做到。你可以使用名为反应PDF, 通过使用这个包, 你可以使用PDF URL在React应用程序中呈现PDF。
先决条件：

你的项目需要使用React 16.3或更高版本。
包装基本知识

React-pdf：它使你能够像在图像中一样轻松地在PDF应用程序中显示PDF。它有助于创建可用于创建和组织PDF文档的自定义组件。
第1步：创建React应用

npx create-react-app appname cd appname npm start

第2步：安装反应PDF包。

npm install react-pdf

第三步：首先做一个单独的组件PDF(组件名称, 可以是任何名称), 并在App.js中呈现PDF组件。
App.js：
Java脚本

import React from 'react' ; import Pdf from './Pdf'const App = ()=> {return ( < div className= "App" > //Rendering a pdf component < Pdf /> < /div> ); }export default App;

创建pdf组件后, 你的项目目录将如下所示。

文章图片
步骤4：在本部分中, 我们将加载PDF并将其呈现在你的应用程序上。
文件：加载使用文件属性传递的文档。
文件属性：它告诉应该显示什么PDF, 在上面的代码中, 我们将URL传递给它。
网址：此处的URL由两部分组成。

第一部分是由于防止cors错误, 你可以参考文档以详细了解内核。

1st part: https://cors-anywhere.herokuapp.com/

第二部分是我们实际的PDF URL。

2nd part: http://www.pdf995.com/samples/pdf.pdf

我们需要做的另一件事是启用PDF.JS工作人员, 你可以从外部CDN使用pdf.worker.js。
onDocumentLoadSuccess：成功加载文档后, 我们设置页码状态以告知用户pdf所在的页码。
Pdf.js：现在打开PDF组件。
Java脚本

import React, { useState } from 'react' ; import { Document, Page, pdfjs } from 'react-pdf' ; import './pdf.css'//PDFjs worker from an external cdn const url = "https://cors-anywhere.herokuapp.com/http://www.pdf995.com/samples/pdf.pdf"export default function Test() {pdfjs.GlobalWorkerOptions.workerSrc = https://www.lsbin.com/` //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; const [numPages, setNumPages] = useState( null ); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); setPageNumber(1); } return ( < > < div className="main" > < Document file={url} onLoadSuccess={onDocumentLoadSuccess} > < Page pageNumber={pageNumber} /> < /Document> < /div> < /> ); }

步骤5：现在, 最后一件事是将NEXT和PREVIOUS按钮添加到PDF文件。
Pdf.js：在这里我们添加了两个按钮下一个和上一个及其功能命名上一页()和下一页()更改当前页面的状态。
Java脚本

import React, { useState } from 'react' ; import { Document, Page, pdfjs } from 'react-pdf' ; const url = "https://cors-anywhere.herokuapp.com/http://www.pdf995.com/samples/pdf.pdf"export default function Test() {pdfjs.GlobalWorkerOptions.workerSrc = https://www.lsbin.com/` //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; const [numPages, setNumPages] = useState( null ); const [pageNumber, setPageNumber] = useState(1); /*To Prevent right click on screen*/ document.addEventListener("contextmenu" , (event) => { event.preventDefault(); }); /*When document gets loaded successfully*/ function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); setPageNumber(1); }function changePage(offset) { setPageNumber(prevPageNumber => prevPageNumber + offset); }function previousPage() { changePage(-1); }function nextPage() { changePage(1); }return ( < > < div className= "main" > < Document file={url} onLoadSuccess={onDocumentLoadSuccess} > < Page pageNumber={pageNumber} /> < /Document> < div> < div className= "pagec" > Page {pageNumber || (numPages ? 1 : '--' )} of {numPages || '--' } < /div> < div className= "buttonc" > < button type= "button" disabled={pageNumber < = 1} onClick={previousPage} className= "Pre"> Previous < /button> < button type= "button" disabled={pageNumber > = numPages} onClick={nextPage}> Next < /button> < /div> < /div> < /div> < /> ); }

【如何使用URL在React应用中将PDF显示为图像（）】输出如下：