如果我们使用提取方法，则它将打开一个新窗口以显示PDF文件，并允许用户下载PDF。但是，如果您不希望这样做，那么有一种方法可以做到。您可以使用名为react-pdf的包，通过使用此包，您可以使用PDF URL在React应用程序中呈现PDF。

先决条件： 

您的项目需要使用React 16.3或更高版本。

包装基本知识 

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

步骤1：创建React App 

npx create-react-app应用名称

cd应用名称

npm开始

第2步：安装react-pdf软件包。

npm install react-pdf

步骤3：首先制作一个单独的组件PDF（组件名称，可以是任何东西），然后在App.js中呈现PDF组件。

App.js：

Java脚本

filter_none

编辑

play_arrow

亮度_4

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并将其呈现在您的应用程序上。

文档：加载使用文件属性传递的文档。

File Prop：它告诉应该显示什么PDF，在上面的代码中，我们将URL传递给它。

URL： URL由两部分组成。

第一部分是由于防止cors错误，您可以参考文档以了解有关该内核的更多信息。

第一部分：https：//cors-anywhere.herokuapp.com/ 

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

第2部分：http：//www.pdf995.com/samples/pdf.pdf

我们需要做的另一件事是ENABLE PDF.JS WORKER，您可以使用来自外部CDN的pdf.worker.js。

onDocumentLoadSuccess：成功加载文档后，我们设置页码状态以告知用户pdf所在的页码。

Pdf.js：现在打开PDF组件。

Java脚本

filter_none

亮度_4

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：在这里，我们添加了两个按钮NEXT和PREVIOUS，它们的函数分别命名为previousPage（）和nextPage（），用于更改当前页面的状态。

Java脚本

filter_none

亮度_4

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> 

    </> 

  ); 

}

输出：