How to open a pdf file in browser instead of downloading it?

Question

I have an api which provides a json-object with a link to the pdf

{ pdf_link: 'http://localhost:3000/logs.pdf' }

When user clicks on the file name, I want to open this pdf in a separate browser tab.

I tried giving the url as href in an a tag

<a href={response.pdf_link} target='_blank'>{FileName}</a>

But when I click on the link, pdf is getting downloaded, not opening in a browser tab.

I found this blog post and tried the following.

import axios from 'axios';
import React from 'react';

export const PdfLink = ({ apiResponse }: any) => {

  const showFile = (blob: Blob, fileName: string) => {
    const newBlob = new Blob([blob], {type: 'application/pdf'});

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(newBlob);
      return;
    }

    const data = window.URL.createObjectURL(newBlob);
    const link = document.createElement('a');
    link.href = data;
    link.download = fileName;
    link.click();

    setTimeout(() => {
      window.URL.revokeObjectURL(data);
    }, 100);
  };

  const onClickLink = () => {
    axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })
    .then(r => showFile(r.data, apiResponse.fileName));
  };

  return (
    <span className='link' onClick={onClickLink}>
      file.pdf
    </span>
  );
};

But this is failing at the api call to get the file blob.

axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })

Error: Access to XMLHttpRequest at 'http://localhost:3005/file.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The below image shows the request and response headers of the api call

I know that the above error is due to cors but in the server, I am allowing requests from other origins as well

app.use(KoaCors({ origin: '*', credentials: true }));

What am I doing wrong?

Does this answer your question? [View pdf file in browser instead of downloading](https://stackoverflow.com/questions/34891513/view-pdf-file-in-browser-instead-of-downloading) — Arjun T Raj, Jul 14 '20 at 11:12
you are trying to access a different port from your site so browser will automatically trigger cors error. cross origin requests are blocked by the browsers for security reasons — aravind_reddy, Jul 14 '20 at 11:13
@aravind_reddy we are allowing api requests from other origins in the server. I updated the question to indicate that. — troglodyte07, Jul 14 '20 at 11:19
@ArjunTRaj I saw a similar answer here - https://stackoverflow.com/questions/6293893/how-do-i-force-files-to-open-in-the-browser-instead-of-downloading-pdf. Where should I set these? In the server? — troglodyte07, Jul 14 '20 at 11:20
you are allowing it in your server but this is blocked by browser — aravind_reddy, Jul 14 '20 at 12:25

score 0 · Answer 1 · answered Jul 14 '20 at 11:20

You can use the object tag to display the pdf:-

<object
        data={/* url of your pdf file*/}
        type="application/pdf"
        width="100%"
        height="100%"
></object>

For more info, look here https://www.w3schools.com/tags/tag_object.asp

How to open a pdf file in browser instead of downloading it?

1 Answers1