How to open a pdf in new tab in reactjs?

Question

We have the pdf document save in data base , from webapi I am returning as byte array,Now from UI I have to open the pdf in new tab of browser, and user should able to download the pdf. How can I achieve this requirement of opening and downloading the pdf document?

Have a look at this post: http://stackoverflow.com/questions/41504668/how-to-open-a-pdf-in-reactjs has some answers, seems answer may lie in the React module react-pdf or react-pdfjs — Jayce444, Jan 10 '17 at 05:52
@Jayce444 I did the same but, problem is that we can't download opened pdf. If you will right click then it will save as the image.But my requirement is to download the opened pdf. — Gorakh Nath, Jan 10 '17 at 05:56

Md. Nazrul Islam · Answer 1 · 2020-08-12T11:26:30.147

The following code work for me

try {
    await axios
      .get(uri.ApiBaseUrl + "AccountReport/GetTrialBalancePdfReport", {
        responseType: "blob",
        params: {
          ...searchObject,
        },
      })
      .then((response) => {
        //Create a Blob from the PDF Stream
        const file = new Blob([response.data], { type: "application/pdf" });
        //Build a URL from the file
        const fileURL = URL.createObjectURL(file);
        //Open the URL on new Window
         const pdfWindow = window.open();
         pdfWindow.location.href = fileURL;            
      })
      .catch((error) => {
        console.log(error);
      });
  } catch (error) {
    return { error };
  }

THX for that. But keep in mind, that it doesnt work for Safari. — Andre Aus B, Mar 16 '21 at 10:16

score 15 · Accepted Answer · edited Feb 02 '21 at 16:16

15

You can use something like this:

<a href='/api/v1/print/example.pdf' target='_blank' rel='noopener noreferrer'>

edited Feb 02 '21 at 16:16

Saurish Kar

576
7
13

answered Jan 10 '17 at 09:07

Max Alekseenko

346
2
7

1

I tried window.open(this.state.path, "_blank"); but its not identifying the path while the path is correct : Cannot GET /Decoding.pdf and in browser Failed to load resource: the server responded with a status of 404 (Not Found) error is coming – Gorakh Nath Jan 10 '17 at 10:26
@jack Can you write what does the path contain? – Max Alekseenko Jan 10 '17 at 16:40

score 13 · Answer 3 · answered Aug 28 '20 at 03:47

13

Solution from 2020

   import Pdf from '../Documents/Document.pdf';

   <a href={Pdf} without rel="noopener noreferrer" target="_blank">
      <button trailingIcon="picture_as_pdf" label="Resume">
        PDF
      </button>
   </a>

answered Aug 28 '20 at 03:47

Qui-Gon Jinn

3,722
3
25
32

1

Thanks. The only solution that worked for me. The only solution that actually uses PDF from local files – Alexander Oct 17 '20 at 12:43
Great, I glad it helps you @Alexander – Qui-Gon Jinn Oct 17 '20 at 15:54
1

it works, but adding random number at the end of file, for example file name is "abc.pdf" but showing "abc.3987n34.pdf", Any reason? – Pardeep Jain Jan 13 '22 at 13:15

score 0 · Answer 4 · answered Apr 06 '23 at 23:01

For some reason, React doesn't allow you to directly reference the path in the href tag, so you need to import it at the top of your file.

import PDF from "file.pdf"

Then use it in your href ->

<a href={PDF} without rel='noreferrer' target='_blank'>
    PDF here
</a>

score 0 · Answer 5 · edited Apr 28 '23 at 01:14

Piggybacking off of Qui-Gon Jinn's answer, I also had the same issue mentioned by Pardeep Jain.

I managed to avoid the random name generation at the end of the file name by placing my PDF inside my public/assets folder (shown below).

Then, to actually display the PDF, I slightly altered the code.

<a href={`${process.env.PUBLIC_URL}/assets/abc.pdf`} rel="noopener noreferrer" target="_blank">
   PDF 
</a>

The use of an .env file is necessary as React does not allow the import of anything outside of the src folder.

How to open a pdf in new tab in reactjs?

5 Answers5

Solution from 2020

Linked