How to open PDF file in new tab using ReactJS ?

How to open PDF file in new tab using ReactJS ?

Last Updated : 30 Sep, 2024

React JS, a commonly used JavaScript library for building user interfaces, sometimes requires opening PDF files in a new tab or window when a button is clicked. You can make this happen by bringing the PDF file into your React application as a module.

Prerequisites:

Approach

To open pdf file in new tab using React JS we will be using the HTML anchor tag. We will pass the pdf url to href and use target _blank. It will open the file in a new tab on the provided URL.

Steps to Create React Application

Step 1: Create a React JS application using the following command:

npx create-react-app <project-name>

Step 2: After creating your project folder, move into that directory using the following command:

cd <project-name>

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Let’s understand the implementation through the example:

JavaScript

// Filename  - App.js

import React from "react";
import samplePDF1 from "./SamplePDF.pdf";
import samplePDF2 from './Example2/SamplePDF.pdf';
const App = () => {
    return (
        <>
            <center>
                <h1>Welcome to Geeks for Geeks</h1>
                <h3>Click on below link to open
                    PDF file in new tab</h3>
                <a href={samplePDF1} target="_blank"
                    rel="noreferrer">
                    Open First PDF
                </a> <br></br>
                <a href={samplePDF2} target="_blank"
                    rel="noreferrer">
                    Open Second PDF
                </a>
            </center>
        </>
    );
};

export default App;

Steps to Run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”

How to open PDF file in new tab using ReactJS ?

kartikmukati

Improve

Article Tags :

Similar Reads

How to Open URL in New Tab using Angular ?

In this article, we will learn How to open a link in a new tab using Angular. A Link is a connection from one web page to another web page. Generally, the anchor tag can be used to open URLs in a new tab in an elementary and straightforward manner. However, the window.open() method can also be utili

How to read PDF file using PHP ?

In this article, we will learn how you can show/read PDF file contents on a browser using PHP.We have to include an external PHP file named "class.pdf2text.php". Include it in the required web page using PHP. Create an HTML form, in which we can choose a PDF file from your computer and also check wh

How to send one or more files to an API using axios in ReactJS?

Assuming that you want to send multiple files from the front-end, i.e., the React app, to the server using Axios. For that, there are two approaches as shown below: Send multiple requests while attaching a single file in each request.Send a single request while attaching multiple files in that reque

How to implement toggle using ReactJS ?

Toggles are a common UI element used to switch between two states or options in a user interface. In ReactJS, it can be achieved using state management and event handling. In this article, we will explore how to implement a toggle feature using ReactJS. PrerequisitesState management in ReactEvent Ma

How To Download PDF file in ReactJS?

Downloading files, such as PDFs, in a React application can be easily achieved using two main methods: Using the HTML DOM Anchor Object and using the fetch() Method. Both of these approaches allow you to download files and store them locally, but they differ in flexibility and complexity. Let's expl

How to open a component in a new tab in React JS ?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. In this tutorial, you will understand how to open a new component in another tab while

How to Zoom in/Zoom out using React-PDF in React JS ?

Zooming in or out in React-PDF within a React JS application is achieved by using the 'scale' prop inside the `<Page />` component. The 'scale' prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page. Prerequisites:React JSReact Functional Compone

How to use files in public folder in ReactJS ?

In React, the files store public folder contains static files such as index.html, javascript library files, images, and other assets, etc. which you don't want to be processed by Webpack. Files in this folder are copied and pasted as they are directly into the build folder. Files inside the `public`

How to Open URL in New Tab using JavaScript?

HTML anchor tag is used to open URLs in a new tab using the target="_blank" attribute. In JavaScript, we have an inbuilt method window.open() which is used to open a new browser window or new tab depending on the browser settings. Using window.open() MethodTo open a new tab, we have to use _blank in

How to use Popper Component in ReactJS ?

A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js.Prerequisite