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

添加时间:2020-10-20 15:34:00

来源:

浏览:

如果我们使用提取方法,则它将打开一个新窗口以显示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> 

    </> 

  ); 

}

输出:


用户名 Name
评论 Comment

联系我们

/ CONTACT US

地 址:成都市人民南路四段成科西路三号

邮政编码:610000

电 话:18215660330

传 真:18215660330

手机:18215660330

邮 箱:zzjfuture@gmail.com

投诉邮 箱:18215660330

姓名Name
标题Title
邮 箱Emali
联系电话Tel
内容Content