CODEWITHSUNDEEP
reactjsreact-native
user
user

Reputation: 1677

How to show pdf file in react.js

i just try to sample application for ios, android and web using react-native-web. Here i have to download a pdf file from server and while click the showpdf button the downloaded file need to open in both android application as well as windows browser also. for browser download i have used the following code 

 fetch('http://www.pdf995.com/samples/pdf.pdf',{ 
      method: 'GET', 
      mode: 'no-cors',
      responseType: 'blob', // important
    headers: {       
      'Content-Type': 'application/json',
    },})
            .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', item.pdfFileName);
        document.body.appendChild(link);
        link.click();
        this.setState({
          pdf_url:url
        });

after download i need to open this pdf file. please help if anyone know this. thanks.

Upvotes: 6

Views: 18431

Answers (2)

piontekle
piontekle

Reputation: 91

You could use <iframe> to preview the PDF directly in your page, setting the src attribute to pdf_url. window.open(pdf_url) is also an option as mentioned above, but it'll require the user to have adblocker/pop-up blocker turned off.

In your render():

{pdf_url && <iframe src={pdf_url} />}

See MDN for multiple ways to display files

Upvotes: 9

karthikdivi
karthikdivi

Reputation: 3643

I suggest you to look at https://www.npmjs.com/package/react-pdf library, using which you can simply display pdfs just like images

Here is online demo http://projects.wojtekmaj.pl/react-pdf/

Upvotes: 0

Related Questions