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

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

先决条件：

• 您的项目需要使用 React 16.3 或更高版本。
• 包的基础知识

React-pdf：它可以让你在你的 React 应用程序中显示 PDF，就像它们是图像一样容易。它有助于创建可用于创建和构建 PDF 文档的自定义组件。

第 1 步：创建 React 应用程序 

npx create-react-app appname

cd appname

npm start

第 2 步：安装 react-pdf 包。

npm install react-pdf

第三步：首先制作一个单独的组件PDF（组件的名称，可以是任何东西）并在App.js中渲染PDF组件。

应用程序.js：

Javascript

import React from 'react';
import Pdf from './Pdf'
  
  
const App = ()=> {
  
 return (
    

         //Rendering a pdf component
        
    
  );
}
  
export default App;

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

第 4 步：在本节中，我们加载 PDF 并将其呈现在您的应用程序上。

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

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

URL：这里的 URL 由两部分组成。

• 第一部分是由于防止 cors 错误，您可以参考文档以阅读有关核心的更多信息。

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

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

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

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

onDocumentLoadSuccess：当文档被成功加载时，我们设置页码状态来告诉用户是哪个 pdf 页码。

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

Javascript

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 (
    <>
    

      
        
      
     
    
  );
}

第 5 步：现在最后一件事将 NEXT 和 PREVIOUS 按钮添加到 PDF 文件。

Pdf.js：这里我们添加了两个按钮NEXT 和 PREVIOUS以及它们名为previousPage()和nextPage()的函数，它们改变了当前页面的状态。

Javascript

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 (
    <>
    

      
        
      
      

        

          Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
        
        

        
          Previous
        
        = numPages}
          onClick={nextPage}
           
        >
          Next
        
        
      
      
    
  );
}

输出：