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

本文概述

• 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 = 
     ` //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 = 
   ` //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>
     </>
   );
}

输出如下：

---