CODEWITHSUNDEEP
javascriptreactjs
Elodie Muller
Elodie Muller

Reputation: 215

Download pdf file from server response

So, I am creating a docx with php laravel, then converting to pdf and save it in my public server folder. Finally, I am sending a response to my client with the file.

Now, in client side, I am tryng to download it.

It's half working, because I can download a file (with exact same page number) but the file and all the page are blank page.

Here, server side sending my file to client side

    $docx->transformDocument($fileName . '.docx',  $fileName . '.pdf');

return response()->file(public_path($fileName . '.pdf'));

What I have tried client side

export const generateDocx = (offerData) => async () => {
  await axios({
    method: 'post',
    url: `${process.env.REACT_APP_API_URL2}offer/generate/docx`,
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json', 
      responseType: 'arraybuffer',
    },
    data: offerData,
  }).then((res) => {
    console.log(res); 
    // Create blob link to download
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `FileName.pdf`);
 
    document.body.appendChild(link);
 
    link.click();
 
    link.parentNode.removeChild(link);
  });
};

what my console.log (res) contain : enter image description here

I have also tried this :

    let fileName = 'aaa.pdf';
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
 
      window.navigator.msSaveOrOpenBlob(
        new Blob([res.data], {
          type: 'application/pdf',
          encoding: 'UTF-8',
          responseType: 'blob'
        }),
        fileName
      );
    } else {
      const url = window.URL.createObjectURL(
        new Blob([res.data], {
          type: 'application/pdf',
          encoding: 'UTF-8',
        })
      );
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      link.remove();
    }
    console.log(res.data);
  });

And with file-saver package

   var blob = new Blob([res.data], {
      type: 'application/pdf',
    });
    saveAs(blob, 'hello world.pdf');
  });

what my blob console.log contain : enter image description here

Upvotes: 3

Views: 9819

Answers (1)

Elodie Muller
Elodie Muller

Reputation: 215

After some test it's working

export const generateDocx = (offerData) => async () => {
  await axios({
    method: 'post',
    url: `${process.env.REACT_APP_API_URL2}offer/generate/docx`,
    responseType: 'blob',
    headers: {
      Accept: 'application/pdf',
    },
    data: offerData,
  }).then((res) => {
    var blob = new Blob([res.data], {
      type: 'application/pdf',
    });
    saveAs(blob, 'test.pdf');
  });
};

thank you all for your help

Upvotes: 3

Related Questions