Open In App

How to open PDF file in new tab using ReactJS ?

Last Updated : 29 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

To complete this task, there’s no need to generate a new component. We’ll rely on the existing “App.js” component, which is automatically created when initiating a React application. Inside “App.js,” we’ll craft the main logic to fulfill the specified functionality. Importantly, there’s no necessity to install any external modules for this task.

Steps to Create React Application And Installing Module:

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




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”

Output



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 utilized to open a new browser window or a new tab depe
2 min read
How to Open URL in New Tab using JavaScript ?
In HTML, the anchor tag is used to open URLs in a new tab in an elementary and straightforward manner. However, sometimes there’s a need to do the same using JavaScript. JavaScript provides the window.open() method to achieve this. It facilitates opening links in new browser windows or tabs, depending on browser settings and parameter values. Appro
2 min read
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 residing in the main application. Prerequisites:No
2 min read
How to open a link in a new Tab in NextJS?
Opening a link in a new tab in Next.js consists of using either the target="_blank" attribute in an anchor (&lt;a&gt;) tag or using Next.js's Link component with the passHref prop to ensure proper handling of routing while opening the link in a new tab. In this article, we will explore both these approaches with complete implementation. Table of Co
3 min read
How to remove active nav-tab when click outside of nav-tab in Bootstrap ?
Bootstrap has the class called "collapse navbar-collapse" which collapses the navigation bar when the user changes the screen resolution. The java-script along-with it at the bottom of the code triggers the collapsed menu in such a way that when the user clicks the hamburger icon of the menu and navigates to the required link, it again collapses th
2 min read
How to open URL in same window and same tab using JavaScript ?
Opening a URL in the same window and in the same tab is a common requirement for web developers. This functionality is useful when you want to load a new web page or document into the current browser window and replace the content of the current web page. There are several ways to open URLs in the same window and in the same tab using JavaScript: T
4 min read
How to open a hyperlink in another window or tab in HTML ?
There are various methods of opening a hyperlink in another window or tab such as using javaScript, jQuery or HTML. For opening a hyperlink in another tab using HTML, use the target attribute and provide it value _blank in the anchor tab. Syntax: &lt;a target="target_name" rel="relation_name" href="link"&gt;Link Name&lt;/a&gt; Here, the rel attribu
2 min read
How to use protractor to wait for new tab to be created ?
Introduction: Protractor is an end-to-end test framework developed for AngularJS applications, however, it also works for non-Angular JS applications. It runs tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to use Protractor to check how we can wait for a new tab to be
3 min read
How to download PDF file in ReactJS ?
To download pdf in React JS there are methods given in JavaScript and HTML DOM. They provide a convenient way to download files and store them in local computers. Here we will use locally stored pdf files in the project folder to use as a sample pdf downloaded by the browser. These are the approaches to download a PDF in React JS projects. Table of
3 min read
How to open a PDF files in web browser using PHP?
PHP uses a standard code to display the pdf file in web browser. The process of displaying pdf involves location of the PDF file on the server and it uses various types of headers to define content composition in form of type, Disposition, Transfer-Encoding etc. PHP passes the PDF files to read it on the browser. Browser either shows it or download
2 min read