How to show pdf file in react.js

Question

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.

Answer 1

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